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

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

illusionGD

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

阅读量3.6k

点赞数

分类专栏：问题积累文章标签： javascript elementui

本文链接：https://blog.csdn.net/illusionGD/article/details/115556867

版权

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

摘要由CSDN通过智能技术生成

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