antd-vue上傳文件upload組件使用自定義上傳方法customRequest無法顯示文件上傳進(jìn)度條，如下圖紅框內(nèi)的進(jìn)度條無法顯示當(dāng)前文件上傳進(jìn)度
于是，在網(wǎng)上搜索解決方案：
第一種解決方案是自己封裝組件，通過axios請求的onUploadProgress來獲取文件上傳進(jìn)度，個人覺得太麻煩；
第二種解決方案是通過upload組件內(nèi)的方法來顯示進(jìn)度條，參考文章：https://blog.csdn.net/LittleBlackyoyoyo/article/details/104810242
我采用了第二種解決方案届惋，但是使用調(diào)用不了參考文章中的`options.onSuccess(res, options.file)`?
于是查看了github上的源碼，決定通過$refs調(diào)用upload組件中顯示進(jìn)度條的方法和上傳成功方法：
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)
}
},
```
