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

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)

}

},

```

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容