antd vue upload 组件使用 customRequest 上传文件显示文件上传进度

用户头像
Seven_xw1213
关注
发布于: 2020 年 07 月 21 日

antd-vue上传文件upload组件使用自定义上传方法customRequest无法显示文件上传进度条,如下图红框内的进度条无法显示当前文件上传进度



于是,在网上搜索解决方案:

第一种解决方案是自己封装组件,通过axios请求的onUploadProgress来获取文件上传进度,个人觉得太麻烦;

第二种解决方案是通过upload组件内的方法来显示进度条,参考文章:https://blog.csdn.net/LittleBlackyoyoyo/article/details/104810242

我采用了第二种解决方案,但是使用调用不了参考文章中的

options.onSuccess(res, options.file)

于是查看了github上的源码,决定通过$refs调用upload组件中显示进度条的方法和上传成功方法:

html部分:

<a-upload
ref="uploadRef"
name="file"
:multiple="false"
:showUploadList="true"
:file-list="fileList"
:customRequest="customRequest"
:remove="removeFile"
@change="fileChange"
>
<a-button>
<a-icon type="upload" /> 上传文件</a-button>
</a-upload>

js部分:

customRequest(fileData) {
uploadFile('upload_files', fileData.file, {
onUploadProgress: (progressEvent) => {
const percentNum = Math.round((progressEvent.loaded * 100) / progressEvent.total);
this.$refs.uploadRef.onProgress(
{
percent: percentNum
},
fileData.file
)
}
}).then(res => {
fileData.file.status = 'done'
fileData.file.url = this.picsPrefix + res.result
this.$refs.uploadRef.onSuccess(res, fileData.file, '')
})
},
fileChange({ file }) {
if (!file.stop) {
this.fileList = []
this.fileList.push(file)
}
},



发布于: 2020 年 07 月 21 日 阅读数: 118
用户头像

Seven_xw1213

关注

一枚前端 2019.01.15 加入

还未添加个人简介

评论

发布
暂无评论
antd vue upload组件使用customRequest上传文件显示文件上传进度