antd-vue上傳文件upload組件使用自定義上傳方法customRequest無法顯示文件上傳進度條，如下圖紅框內的進度條無法顯示當前文件上傳進度

于是，在網上搜索解決方案：

第一種解決方案是自己封裝組件，通過axios請求的onUploadProgress來獲取文件上傳進度，個人覺得太麻煩；

我采用了第二種解決方案，但是使用調用不了參考文章中的`options.onSuccess(res, options.file)`

于是查看了github上的源碼，決定通過$refs調用upload組件中顯示進度條的方法和上傳成功方法：

html部分：

```html

ref="uploadRef"

name="file"

:multiple="false"

:showUploadList="true"

:file-list="fileList"

:customRequest="customRequest"

:remove="removeFile"

@change="fileChange"

>

上傳文件

```

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)

}

},

```

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的antd 上传进度_antd vue upload组件使用customRequest上传文件显示文件上传进度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。