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

最近在项目中遇到了这样的一个问题，使用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(),不然就会一直保持在上传中这个状态，无法显示图片的缩略图
      })
    }

结果如下图所示：