elementUI自定义upload组件，进度条消失解决方法

最新推荐文章于 2025-09-11 04:47:53 发布

原创最新推荐文章于 2025-09-11 04:47:53 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

问题积累专栏收录该内容

4 篇文章

订阅专栏

本文介绍了elementUI的upload组件在自定义过程中遇到的进度条消失问题及其解决方案。关键在于理解file-list数组及其中对象的status和percentage属性。通过动态调整这些属性，可以确保进度条正确显示上传状态。

相信有些小伙伴用elementUI的upload组件时，通过`http-request`属性重写了上传的方法，
然后发现文件列表的进度条消失了ㄟ( ▔, ▔ )ㄏ，下面来看看怎么解决吧。（下面的列子主要是上传视频文件）

重点

进度条的显示效果主要由下面几点决定的：
1.file-list绑定的数组，该数组里面有多少个文件对象，列表就会显示多少个

:file-list="videoFileList"   //videoFileList是自定义的，存放视频文件的数组

2.列表里面的进度条显示，跟绑定的数组里面的对象属性有关，主要是status、percentage两个对象，status决定了进度条的显示状态（uploading 表示正在上传，success 表示上传成功，failed 表示上传失败），percentage决定了进度条的%（也就是说上传了%多少，是接收Number类型）

videoFileList:[
          {//文件对象
            ....
            status:'',
            percentage:0,
            ...
          },
          {//文件对象
            ...
            status:'',
            percentage:0,
            ...
          }
        ]

好了(ง •_•)ง，既然已经知道了这两个属性的作用，那就动态改变他们，就能解决进度条的显示问题了。

个人解决方法

1.在上传方法中实现对文件的status、percentage改变

:http-request="upLoadVideo"   //自定义的上传方法

uploadImgs(fileObj){    //elementUI会自动传一个参数（fileObj）进来，这个参数就是文件对象了，elementUI会自动将这个对象放进绑定的数组里面，如果没有放入就自己push进去就好了
        fileObj.status = 'uploading';   //本人是直接向这个对象里面添加status、percentage两个对象
        fileObj.percentage = 0;
        const formData = new FormData();     //不用看
        formData.append('file', fileObj.file);  //不用看
        formData.append('type', fileObj.file.type);  //不用看
        request({  //不用看
          url:api_list.api_uploadImage + '/' + '?module=showPicture',   //不用看
          method:'post',   //不用看
          data:formData,   //不用看
          timeout:60000   //不用看
          onUploadProgress: function(progressEvent) { // 处理上传进度事件，在这里改变percentage的值吧
		      let percent = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);   //计算出上传的进度，去整数位
		      fileObj.percentage = percent;  //动态设置fileObj的percentage
		    }
        }).then(res=>{
          if(res.success){
            fileObj.status = 'success';  //上传成功后将status属性改成success
          }
        }).catch( err=>{
          if(err){
            fileObj.status = 'failed';
            fileObj.message = '上传失败';
          }
        })
      }