关于ant design vue中的自定义上传
最近在项目中遇到了这样的一个问题,使用ant design vue中的自定义上传功能时,无法显示图片的缩略图。如下图所示:解决方法: 在自定义上传成功后调用onSuccess()方法1、在a-upload组件中定义:customRequest="customUpload".<a-uploadlist-type="picture-card":file-list="fileList"@previ
·
最近在项目中遇到了这样的一个问题,使用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(),不然就会一直保持在上传中这个状态,无法显示图片的缩略图
})
}
结果如下图所示:
更多推荐
已为社区贡献2条内容
所有评论(0)