关于ant design vue中的自定义上传

最新推荐文章于 2025-09-22 18:09:34 发布

原创最新推荐文章于 2025-09-22 18:09:34 发布 · 3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

本文介绍在AntDesignVue中实现自定义上传功能，并解决上传成功后无法显示图片缩略图的问题。通过在上传成功后调用onSuccess()方法，成功实现了图片的预览。

最近在项目中遇到了这样的一个问题，使用ant design vue中的自定义上传功能时，无法显示图片的缩略图。如下图所示:

解决方法：在自定义上传成功后调用onSuccess()方法

1、在a-upload组件中定义:customRequest="customUpload".

<a-upload
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
            :customRequest="customUpload"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel_">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>

2、在上传成功之后调用onSuccess()方法

// 自定义上传
    customUpload(data) {
      const formData = new FormData()
      formData.append('fileList', data.file)
      formData.append('c1003Woid', this.taskForm.C1003_WOID) // 上传携带额外参数
      uploadFile(formData).then((res) => {
        if (res.data.status == 200) data.onSuccess() // 自定义上传成功后一定要调用onSuccess(),不然就会一直保持在上传中这个状态，无法显示图片的缩略图
      })
    }

结果如下图所示：