Refactor upload component.

2019-09-08 21:31:41 +08:00 · 2019-09-08 21:31:41 +08:00 · ae98ef7351
parent e5ac8df1bd
commit ae98ef7351
19 changed files with 275 additions and 216 deletions
--- a/package.json
+++ b/package.json
@ -13,6 +13,8 @@
    "ant-design-vue": "^1.3.16",
    "axios": "^0.18.0",
    "enquire.js": "^2.1.6",
+    "filepond": "^4.6.1",
+    "filepond-plugin-image-preview": "^4.4.0",
    "halo-editor": "^2.7.6",
    "marked": "^0.6.3",
    "moment": "^2.24.0",
@ -22,6 +24,7 @@
    "vue-clipboard2": "^0.3.0",
    "vue-codemirror-lite": "^1.0.4",
    "vue-count-to": "^1.0.13",
+    "vue-filepond": "^5.1.3",
    "vue-ls": "^3.2.1",
    "vue-router": "^3.1.2",
    "vue-video-player": "^5.0.2",
--- a/src/api/backup.js
+++ b/src/api/backup.js
@ -6,7 +6,7 @@ const backupApi = {}

 backupApi.importMarkdown = (formData, uploadProgress, cancelToken) => {
  return service({
-    url: `${baseUrl}/import/markdowns`,
+    url: `${baseUrl}/import/markdown`,
    timeout: 8640000, // 24 hours
    data: formData, // form data
    onUploadProgress: uploadProgress,
--- a/src/api/post.js
+++ b/src/api/post.js
@ -66,6 +66,13 @@ postApi.delete = postId => {
  })
 }

+postApi.preview = postId => {
+  return service({
+    url: `${baseUrl}/preview/${postId}`,
+    method: 'get'
+  })
+}
+
 postApi.postStatus = {
  PUBLISHED: {
    color: 'green',
--- a/src/api/sheet.js
+++ b/src/api/sheet.js
@ -61,6 +61,13 @@ sheetApi.delete = sheetId => {
  })
 }

+sheetApi.preview = sheetId => {
+  return service({
+    url: `${baseUrl}/preview/${sheetId}`,
+    method: 'get'
+  })
+}
+
 sheetApi.sheetStatus = {
  PUBLISHED: {
    color: 'green',
--- a/src/components/Upload/FilePondUpload.vue
+++ b/src/components/Upload/FilePondUpload.vue
@ -0,0 +1,132 @@
+<template>
+  <div>
+    <file-pond
+      ref="pond"
+      :label-idle="label"
+      :name="name"
+      :allow-multiple="multiple"
+      :allowRevert="false"
+      :accepted-file-types="accept"
+      :maxParallelUploads="options.attachment_upload_max_parallel_uploads"
+      :allowImagePreview="options.attachment_upload_image_preview_enable"
+      :maxFiles="options.attachment_upload_max_files"
+      labelFileProcessing="上传中"
+      labelFileProcessingComplete="上传完成"
+      labelFileProcessingAborted="取消上传"
+      labelFileProcessingError="上传错误"
+      labelTapToCancel="点击取消"
+      labelTapToRetry="点击重试"
+      :files="fileList"
+      :server="server"
+      @init="handleFilePondInit"
+    >
+    </file-pond>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import axios from 'axios'
+
+import vueFilePond from 'vue-filepond'
+import 'filepond/dist/filepond.min.css'
+
+// Plugins
+import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
+import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
+
+// Create component and regist plugins
+const FilePond = vueFilePond(FilePondPluginImagePreview)
+export default {
+  name: 'FilePondUpload',
+  components: {
+    FilePond
+  },
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: 'file'
+    },
+    filed: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    accept: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '点击选择文件或将文件拖拽到此处'
+    },
+    uploadHandler: {
+      type: Function,
+      required: true
+    }
+  },
+  data: function() {
+    return {
+      server: {
+        process: (fieldName, file, metadata, load, error, progress, abort) => {
+          const formData = new FormData()
+          formData.append(fieldName, file, file.name)
+
+          const CancelToken = axios.CancelToken
+          const source = CancelToken.source()
+
+          this.uploadHandler(
+            formData,
+            progressEvent => {
+              if (progressEvent.total > 0) {
+                progress(progressEvent.lengthComputable, progressEvent.loaded, progressEvent.total)
+              }
+            },
+            source.token,
+            this.filed,
+            file
+          )
+            .then(response => {
+              load(response)
+              this.$log.debug('Uploaded successfully', response)
+              this.$emit('success', response, file)
+            })
+            .catch(failure => {
+              this.$log.debug('Failed to upload file', failure)
+              this.$emit('failure', failure, file)
+              error()
+            })
+          return {
+            abort: () => {
+              abort()
+              this.$log.debug('Upload operation aborted by the user')
+              source.cancel('Upload operation canceled by the user.')
+            }
+          }
+        }
+      },
+      fileList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['options'])
+  },
+  methods: {
+    handleFilePondInit() {
+      console.log('FilePond has initialized')
+    },
+    handleClearFileList() {
+      this.$refs.pond.removeFiles()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>
--- a/src/components/Upload/UpdateTheme.vue
+++ b/src/components/Upload/UpdateTheme.vue
@ -1,110 +0,0 @@
-<template>
-  <div>
-    <a-upload-dragger
-      v-if="draggable"
-      :name="name"
-      :accept="accept"
-      :customRequest="handleUpload"
-      :remove="handleRemove"
-      @change="handleChange"
-    >
-      <slot
-        role="button"
-        class="ant-upload ant-upload-btn"
-      />
-    </a-upload-dragger>
-    <a-upload
-      v-else
-      :name="name"
-      :accept="accept"
-      :customRequest="handleUpload"
-      :remove="handleRemove"
-      @change="handleChange"
-    >
-      <slot />
-    </a-upload>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'UpdateTheme',
-  props: {
-    name: {
-      type: String,
-      required: false,
-      default: 'file'
-    },
-    themeId: {
-      type: String,
-      required: true
-    },
-    draggable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    accept: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    uploadHandler: {
-      type: Function,
-      required: true
-    }
-  },
-  methods: {
-    handleChange(info) {
-      this.$emit('change', info)
-    },
-    handleRemove(file) {
-      this.$log.debug('Removed file', file)
-      this.$emit('remove', file)
-    },
-    handleUpload(option) {
-      this.$log.debug('Uploading option', option)
-      const CancelToken = axios.CancelToken
-      const source = CancelToken.source()
-
-      const data = new FormData()
-      data.append(this.name, option.file)
-
-      this.uploadHandler(
-        data,
-        progressEvent => {
-          if (progressEvent.total > 0) {
-            progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100
-          }
-          this.$log.debug('Uploading percent: ', progressEvent.percent)
-          option.onProgress(progressEvent)
-        },
-        source.token,
-        this.themeId,
-        option.file
-      )
-        .then(response => {
-          this.$log.debug('Uploaded successfully', response)
-          option.onSuccess(response, option.file)
-          this.$emit('success', response, option.file)
-        })
-        .catch(error => {
-          this.$log.debug('Failed to upload file', error)
-          option.onError(error, error.response)
-          this.$emit('failure', error, option.file)
-        })
-      return {
-        abort: () => {
-          this.$log.debug('Upload operation aborted by the user')
-          source.cancel('Upload operation canceled by the user.')
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style>
-</style>
--- a/src/components/index.js
+++ b/src/components/index.js
@ -4,13 +4,13 @@ import Vue from 'vue'
 import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
 import Upload from '@/components/Upload/Upload'
-import UpdateTheme from '@/components/Upload/UpdateTheme'
+import FilePondUpload from '@/components/Upload/FilePondUpload'

 const _components = {
  Ellipsis,
  FooterToolbar,
  Upload,
-  UpdateTheme
+  FilePondUpload
 }

 const components = {}
--- a/src/store/modules/option.js
+++ b/src/store/modules/option.js
@ -3,7 +3,12 @@ import {
  OPTIONS
 } from '@/store/mutation-types'
 import optionApi from '@/api/option'
-const keys = ['blog_url']
+const keys = [
+  'blog_url',
+  'attachment_upload_image_preview_enable',
+  'attachment_upload_max_parallel_uploads',
+  'attachment_upload_max_files'
+]
 const option = {
  state: {
    options: []
--- a/src/views/attachment/AttachmentList.vue
+++ b/src/views/attachment/AttachmentList.vue
@ -136,18 +136,12 @@
      v-model="uploadVisible"
      :footer="null"
      :afterClose="onUploadClose"
+      destroyOnClose
    >
-      <upload
-        name="file"
-        multiple
+      <FilePondUpload
+        ref="upload"
        :uploadHandler="uploadHandler"
-      >
-        <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
-        <p class="ant-upload-hint">支持单个或批量上传</p>
-      </upload>
+      ></FilePondUpload>
    </a-modal>
    <AttachmentDetailDrawer
      v-model="drawerVisible"
@ -193,8 +187,8 @@ export default {
        mediaType: null,
        attachmentType: null
      },
-      uploadHandler: attachmentApi.upload,
-      drawerVisible: false
+      drawerVisible: false,
+      uploadHandler: attachmentApi.upload
    }
  },
  computed: {
@ -260,6 +254,7 @@ export default {
      this.loadAttachments()
    },
    onUploadClose() {
+      this.$refs.upload.handleClearFileList()
      this.loadAttachments()
      this.loadMediaTypes()
    },
--- a/src/views/attachment/components/AttachmentDrawer.vue
+++ b/src/views/attachment/components/AttachmentDrawer.vue
@ -56,7 +56,7 @@
        :attachment="selectedAttachment"
        @delete="handleDelete"
      />
-      <a-divider class="divider-transparent"/>
+      <a-divider class="divider-transparent" />
      <div class="bottom-control">
        <a-button
          @click="handleShowUploadModal"
@ -70,18 +70,12 @@
      v-model="uploadVisible"
      :footer="null"
      :afterClose="onUploadClose"
+      destroyOnClose
    >
-      <upload
-        name="file"
-        multiple
-        :uploadHandler="attachmentUploadHandler"
-      >
-        <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
-        <p class="ant-upload-hint">支持单个或批量上传</p>
-      </upload>
+      <FilePondUpload
+        ref="upload"
+        :uploadHandler="uploadHandler"
+      ></FilePondUpload>
    </a-modal>
  </div>
 </template>
@ -128,7 +122,7 @@ export default {
      },
      attachments: [],
      selectedAttachment: {},
-      attachmentUploadHandler: attachmentApi.upload
+      uploadHandler: attachmentApi.upload
    }
  },
  computed: {
@ -183,6 +177,7 @@ export default {
      this.loadAttachments()
    },
    onUploadClose() {
+      this.$refs.upload.handleClearFileList()
      this.loadSkeleton()
      this.loadAttachments()
    },
--- a/src/views/attachment/components/AttachmentSelectDrawer.vue
+++ b/src/views/attachment/components/AttachmentSelectDrawer.vue
@ -67,18 +67,12 @@
      v-model="uploadVisible"
      :footer="null"
      :afterClose="onUploadClose"
+      destroyOnClose
    >
-      <upload
-        name="file"
-        multiple
-        :uploadHandler="attachmentUploadHandler"
-      >
-        <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
-        <p class="ant-upload-hint">支持单个或批量上传</p>
-      </upload>
+      <FilePondUpload
+        ref="upload"
+        :uploadHandler="uploadHandler"
+      ></FilePondUpload>
    </a-modal>
  </div>
 </template>
@ -126,7 +120,7 @@ export default {
        sort: ''
      },
      attachments: [],
-      attachmentUploadHandler: attachmentApi.upload
+      uploadHandler: attachmentApi.upload
    }
  },
  created() {
@ -174,6 +168,7 @@ export default {
      this.loadAttachments()
    },
    onUploadClose() {
+      this.$refs.upload.handleClearFileList()
      this.loadSkeleton()
      this.loadAttachments()
    },
--- a/src/views/comment/components/CommentTab.vue
+++ b/src/views/comment/components/CommentTab.vue
@ -235,6 +235,7 @@
      :title="'回复给：'+selectComment.author"
      v-model="replyCommentVisible"
      @close="onReplyClose"
+      destroyOnClose
    >
      <template slot="footer">
        <a-button
--- a/src/views/interface/ThemeList.vue
+++ b/src/views/interface/ThemeList.vue
@ -162,8 +162,10 @@
    <a-modal
      title="安装主题"
      v-model="uploadThemeVisible"
+      destroyOnClose
      :footer="null"
      :bodyStyle="{ padding: '0 24px 24px' }"
+      :afterClose="onThemeUploadClose"
    >
      <div class="custom-tab-wrapper">
        <a-tabs>
@ -201,20 +203,15 @@
            tab="本地上传"
            key="2"
          >
-            <upload
+            <FilePondUpload
+              ref="upload"
              name="file"
-              multiple
              accept="application/zip"
+              label="点击选择主题包或将主题包拖拽到此处<br>仅支持 ZIP 格式的文件"
              :uploadHandler="uploadHandler"
-              @change="handleUploadChange"
              @success="handleUploadSuccess"
            >
-              <p class="ant-upload-drag-icon">
-                <a-icon type="inbox" />
-              </p>
-              <p class="ant-upload-text">点击选择主题包或将主题包拖拽到此处</p>
-              <p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
-            </upload>
+            </FilePondUpload>
          </a-tab-pane>
        </a-tabs>
      </div>
@ -223,21 +220,20 @@
      title="更新主题"
      v-model="uploadNewThemeVisible"
      :footer="null"
+      destroyOnClose
+      :afterClose="onThemeUploadClose"
    >
-      <UpdateTheme
+      <FilePondUpload
+        ref="updateByupload"
        name="file"
-        :themeId="prepareUpdateTheme.id"
        accept="application/zip"
+        label="点击选择主题更新包或将主题更新包拖拽到此处<br>仅支持 ZIP 格式的文件"
        :uploadHandler="updateByUploadHandler"
-        @change="handleNewThemeUploadChange"
+        :filed="prepareUpdateTheme.id"
+        :multiple="false"
        @success="handleUploadSuccess"
      >
-        <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择主题包或将主题包拖拽到此处</p>
-        <p class="ant-upload-hint">请选择最新的主题包，仅支持 ZIP 格式的文件</p>
-      </UpdateTheme>
+      </FilePondUpload>
    </a-modal>
  </div>
 </template>
@ -313,26 +309,6 @@ export default {
        this.loadThemes()
      })
    },
-    onThemeSettingsClose() {
-      this.themeSettingVisible = false
-      this.selectedTheme = {}
-    },
-    handleUploadChange(info) {
-      const status = info.file.status
-      if (status === 'done') {
-        this.$message.success(`${info.file.name} 主题上传成功！`)
-      } else if (status === 'error') {
-        this.$message.error(`${info.file.name} 主题上传失败！`)
-      }
-    },
-    handleNewThemeUploadChange(info) {
-      const status = info.file.status
-      if (status === 'done') {
-        this.$message.success(`${info.file.name} 主题更新成功！`)
-      } else if (status === 'error') {
-        this.$message.error(`${info.file.name} 主题更新失败！`)
-      }
-    },
    handleUploadSuccess() {
      if (this.uploadThemeVisible) {
        this.uploadThemeVisible = false
@ -375,13 +351,25 @@ export default {
      })
    },
    handleShowUpdateNewThemeModal(item) {
-      console.log(item)
      this.prepareUpdateTheme = item
      this.uploadNewThemeVisible = true
    },
    handleShowThemeSetting(theme) {
      this.selectedTheme = theme
      this.themeSettingVisible = true
+    },
+    onThemeUploadClose() {
+      if (this.uploadThemeVisible) {
+        this.$refs.upload.handleClearFileList()
+      }
+      if (this.uploadNewThemeVisible) {
+        this.$refs.updateByupload.handleClearFileList()
+      }
+      this.loadThemes()
+    },
+    onThemeSettingsClose() {
+      this.themeSettingVisible = false
+      this.selectedTheme = {}
    }
  }
 }
--- a/src/views/post/PostEdit.vue
+++ b/src/views/post/PostEdit.vue
@ -187,14 +187,18 @@ export default {
        // Update the post
        postApi.update(this.postToStage.id, this.postToStage, false).then(response => {
          this.$log.debug('Updated post', response.data.data)
-          window.open(`${this.options.blog_url}/api/admin/posts/preview/${this.postToStage.id}`, '_blank')
+          postApi.preview(this.postToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
        })
      } else {
        // Create the post
        postApi.create(this.postToStage, false).then(response => {
          this.$log.debug('Created post', response.data.data)
          this.postToStage = response.data.data
-          window.open(`${this.options.blog_url}/api/admin/posts/preview/${this.postToStage.id}`, '_blank')
+          postApi.preview(this.postToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
        })
      }
    },
--- a/src/views/post/PostList.vue
+++ b/src/views/post/PostList.vue
@ -143,10 +143,10 @@
              twoToneColor="red"
            />
            <a
+              v-if="record.status=='PUBLISHED'"
              :href="options.blog_url+'/archives/'+record.url"
              target="_blank"
              style="text-decoration: none;"
-              v-if="record.status=='PUBLISHED'"
            >
              <a-tooltip
                placement="top"
@ -154,10 +154,10 @@
              >{{ text }}</a-tooltip>
            </a>
            <a
+              v-else-if="record.status == 'INTIMATE'"
              :href="options.blog_url+'/archives/'+record.url+'/password'"
              target="_blank"
              style="text-decoration: none;"
-              v-else-if="record.status == 'INTIMATE'"
            >
              <a-tooltip
                placement="top"
@ -165,10 +165,10 @@
              >{{ text }}</a-tooltip>
            </a>
            <a
-              :href="`${options.blog_url}/api/admin/posts/preview/${record.id}`"
-              target="_blank"
-              style="text-decoration: none;"
              v-else-if="record.status=='DRAFT'"
+              href="javascript:void(0)"
+              style="text-decoration: none;"
+              @click="handlePreview(record.id)"
            >
              <a-tooltip
                placement="topLeft"
@ -176,10 +176,10 @@
              >{{ text }}</a-tooltip>
            </a>
            <a
+              v-else
              href="javascript:void(0);"
              style="text-decoration: none;"
              disabled
-              v-else
            >
              {{ text }}
            </a>
@ -564,6 +564,11 @@ export default {
        this.postSettingVisible = true
      })
    },
+    handlePreview(postId) {
+      postApi.preview(postId).then(response => {
+        window.open(response.data, '_blank')
+      })
+    },
    // 关闭文章设置抽屉
    onPostSettingsClose() {
      this.postSettingVisible = false
--- a/src/views/sheet/SheetEdit.vue
+++ b/src/views/sheet/SheetEdit.vue
@ -174,13 +174,17 @@ export default {
      if (this.sheetToStage.id) {
        sheetApi.update(this.sheetToStage.id, this.sheetToStage, false).then(response => {
          this.$log.debug('Updated sheet', response.data.data)
-          window.open(`${this.options.blog_url}/api/admin/sheets/preview/${this.sheetToStage.id}`, '_blank')
+          sheetApi.preview(this.sheetToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
        })
      } else {
        sheetApi.create(this.sheetToStage, false).then(response => {
          this.$log.debug('Created sheet', response.data.data)
          this.sheetToStage = response.data.data
-          window.open(`${this.options.blog_url}/api/admin/sheets/preview/${this.sheetToStage.id}`, '_blank')
+          sheetApi.preview(this.sheetToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
        })
      }
    },
--- a/src/views/sheet/SheetList.vue
+++ b/src/views/sheet/SheetList.vue
@ -83,10 +83,10 @@
                  style="max-width: 150px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                >
                  <a
+                    v-if="record.status=='PUBLISHED'"
                    :href="options.blog_url+'/s/'+record.url"
                    target="_blank"
                    style="text-decoration: none;"
-                    v-if="record.status=='PUBLISHED'"
                  >
                    <a-tooltip
                      placement="top"
@ -94,10 +94,10 @@
                    >{{ text }}</a-tooltip>
                  </a>
                  <a
-                    :href="`${options.blog_url}/api/admin/sheets/preview/${record.id}`"
-                    target="_blank"
-                    style="text-decoration: none;"
                    v-else-if="record.status=='DRAFT'"
+                    href="javascript:void(0)"
+                    style="text-decoration: none;"
+                    @click="handlePreview(record.id)"
                  >
                    <a-tooltip
                      placement="topLeft"
@ -105,10 +105,10 @@
                    >{{ text }}</a-tooltip>
                  </a>
                  <a
+                    v-else
                    href="javascript:void(0);"
                    style="text-decoration: none;"
                    disabled
-                    v-else
                  >
                    {{ text }}
                  </a>
@ -390,6 +390,11 @@ export default {
        this.sheetSettingVisible = true
      })
    },
+    handlePreview(sheetId) {
+      sheetApi.preview(sheetId).then(response => {
+        window.open(response.data, '_blank')
+      })
+    },
    onSheetSettingsClose() {
      this.sheetSettingVisible = false
      this.selectedSheet = {}
--- a/src/views/system/OptionForm.vue
+++ b/src/views/system/OptionForm.vue
@ -251,6 +251,30 @@
                <a-icon type="picture" />附件设置
              </span>
              <a-form layout="vertical">
+                <a-form-item
+                  label="上传图片时预览："
+                  :wrapper-col="wrapperCol"
+                >
+                  <a-switch v-model="options.attachment_upload_image_preview_enable" />
+                </a-form-item>
+                <a-form-item
+                  label="最大上传文件数："
+                  :wrapper-col="wrapperCol"
+                >
+                  <a-input
+                    type="number"
+                    v-model="options.attachment_upload_max_files"
+                  />
+                </a-form-item>
+                <a-form-item
+                  label="同时上传文件数："
+                  :wrapper-col="wrapperCol"
+                >
+                  <a-input
+                    type="number"
+                    v-model="options.attachment_upload_max_parallel_uploads"
+                  />
+                </a-form-item>
                <a-form-item
                  label="存储位置："
                  :wrapper-col="wrapperCol"
--- a/src/views/system/ToolList.vue
+++ b/src/views/system/ToolList.vue
@ -27,20 +27,16 @@
        title="Markdown 文章导入"
        v-model="markdownUpload"
        :footer="null"
+        destroyOnClose
+        :afterClose="onUploadClose"
      >
-        <upload
-          name="files"
-          multiple
+        <FilePondUpload
+          ref="upload"
+          name="file"
          accept="text/markdown"
+          label="拖拽或点击选择 Markdown 文件到此处"
          :uploadHandler="uploadHandler"
-          @change="handleChange"
-        >
-          <p class="ant-upload-drag-icon">
-            <a-icon type="inbox" />
-          </p>
-          <p class="ant-upload-text">拖拽或点击选择 Markdown 文件到此处</p>
-          <p class="ant-upload-hint">支持多个文件同时上传</p>
-        </upload>
+        ></FilePondUpload>
      </a-modal>
    </div>
  </div>
@ -69,6 +65,9 @@ export default {
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} 导入失败！`)
      }
+    },
+    onUploadClose() {
+      this.$refs.upload.handleClearFileList()
    }
  }
 }