antd-vue上传文件upload组件使用自定义上传方法customRequest无法显示文件上传进度条,如下图红框内的进度条无法显示当前文件上传进度
于是,在网上搜索解决方案:
第一种解决方案是自己封装组件,通过axios请求的onUploadProgress来获取文件上传进度,个人觉得太麻烦;
第二种解决方案是通过upload组件内的方法来显示进度条,参考文章:https://blog.csdn.net/LittleBlackyoyoyo/article/details/104810242
我采用了第二种解决方案,但是使用调用不了参考文章中的`options.onSuccess(res, options.file)`
于是查看了github上的源码,决定通过$refs调用upload组件中显示进度条的方法和上传成功方法:
html部分:
```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部分:
```javascript
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)
}
},
```