iview UI, как очистить файлы после успешной загрузки? - PullRequest
Новая
       23

iview UI, как очистить файлы после успешной загрузки?

0 голосов
/ 20 ноября 2018

Я пытаюсь очистить списки файлов как iview ui по умолчанию показать список файлов.Проблема в том, что пользователь может загружать файлы разное время, а компонент загрузки ivew ui сохраняет старые файлы в списке.Я не откуда список.Я видел, что есть метод clearFiles, но не уверен, как его использовать.Там нет примера в док.Вот как я использую.Во-первых, если я сделаю :show-upload-list до false, список не отобразится, но индикатор выполнения также не отобразится.Я хочу, чтобы индикатор выполнения остался, а список не должен отображаться. 

<Upload
   :multiple="false"

   :show-upload-list="true"
   :on-success="handleSuccess"
   :format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
   :max-size="21048"
   :on-format-error="handleFormatError"
   :on-exceeded-size="handleMaxSize"
   type="drag"
   :action="isFileUpload.url"
   :data="isFileUpload.meta"

>
<div style="padding: 20px 0">
    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
    <p>Click or drag files here to upload</p>
</div>

Спасибо.

1 Ответ

0 голосов
/ 20 ноября 2018

Вы можете добавить ref="upload" к компоненту vue и очистить файл с помощью this.$refs.upload.clearFiles()

<template>
  <Upload
     ref="upload"
     :multiple="false"
     :show-upload-list="true"
     :on-success="handleSuccess"
     :format="['jpg','jpeg','png', 'pdf', 'docx', 'txt', 'mp4', 'mp3', 'zip']"
     :max-size="21048"
     :on-format-error="handleFormatError"
     :on-exceeded-size="handleMaxSize"
     type="drag"
     :action="isFileUpload.url"
     :data="isFileUpload.meta"

  >
  <div style="padding: 20px 0">
      <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
      <p>Click or drag files here to upload</p>
  </div>
</template>


<script>
export default {
  ...
  methods: {
    handleSuccess () {
      this.$refs.upload.clearFiles()
    }
  }
  ...
}
</script>
...