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

关注

发布于: 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 日阅读数: 274

原文链接:【http://xie.infoq.cn/article/64b35b9d170b12705fd0cbd7b】。文章转载请联系作者。

Seven_xw1213

关注

一枚前端 2019.01.15 加入

还未添加个人简介

发布

暂无评论

创作场景

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

Seven_xw1213

评论