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: