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

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)

}

```

antd 上传进度_antd vue upload组件使用customRequest上传文件显示文件上传进度相关推荐

vue上传图片组件（支持拖拽文件夹上传）
点击打开源码 https://github.com/317482454/vue_upload 在线查看地址:http://jqvue.com/demo/vue_upload/demo.html 1.获 ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
antdvue upload组件的customRequest自定义上传事件一直uploading处理方法
antdvue里面用到upload组件,本以为很简单的,还有不少的坑要注意文件上传失败,一直显示提示文字"文件上传中" <a-upload v-model:file-lis ...
java加vue实例_Vue.Js及Java实现文件分片上传代码实例
upload(file) { //从后台获取已经上传的文件分片数 getIdx(md5) .then(function(res) { let retry = 3; uploadPart(retry, ...
vue+el-upload组件封装（图片，文件上传至oss阿里云）
1.安装ali-oss npm install ali-oss --save 2.oss方法封装新建utils/ali-oss-upload.js文件(代码如下) const OSS = requi ...
vue的组件components基础和安装vue脚手架
组件组件在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行封装作用:可复用的vue实例组件注册局部注册组件 new Vue({ el: comp ...
使用element-ui的upload组件上传代码包时遇到的问题及总结
1.在工作中使用element-ui的upload组件时,遇到一个问题就是这个upload会自动发送一个http请求,即使你使用了http-request自定义上传覆盖默认上传函数,也会导致在控制台里 ...
Spring Boot + Vue 前后端分离，两种文件上传方式总结
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传通过 ElementUI 里边的 U ...
.vue文件_Spring Boot + Vue 前后端分离，两种文件上传方式总结！
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传通过 ElementUI 里边的 U ...

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

antd 上传进度_antd vue upload组件使用customRequest上传文件显示文件上传进度相关推荐

最新文章

热门文章