About custom upload in ant design vue

Recently, I encountered such a problem in the project. When using the custom upload function in ant design vue, the thumbnail of the picture cannot be displayed. As shown below:

Solution: Call the onSuccess() method after the custom upload is successful

1. Define in the a-upload component: 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. Call the onSuccess () method after the upload is successful

// 自定义上传
    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(),不然就会一直保持在上传中这个状态,无法显示图片的缩略图
      })
    }

The result is shown in the figure below:

 

Guess you like

Origin blog.csdn.net/Z_J_CSDN/article/details/108078023