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

最新推荐文章于 2024-09-29 10:30:59 发布

原创

最新推荐文章于 2024-09-29 10:30:59 发布 · 3.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信有些小伙伴用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:'',<