基于vue+element-ui实现上传进度条

最新推荐文章于 2023-02-16 10:18:13 发布

兰交余文乐

最新推荐文章于 2023-02-16 10:18:13 发布

阅读量6.7k

点赞数 5

分类专栏：进度条文章标签：进度条

本文链接：https://blog.youkuaiyun.com/weixin_56674682/article/details/123992743

版权

进度条专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Element UI的el-upload组件配合后端，实现实时文件上传进度条显示。前端通过监听上传进度并定期请求后台状态，与后台创建的进度变量同步更新。同时，后端通过创建map存储用户操作进度，确保数据一致。

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

基于el-upload组件实现进度条的编写

后台进度前台进度条显示

基于el-upload组件实现进度条的编写

①编写文件上传时的钩子函数

 uploadProgress(event,file,fileList){
        let _self = this;
        if(event.lengthComputable){
          let val = (event.loaded / event.total * 100 ).toFixed(0);
          var progress = parseInt(val);
            _self.percentage = progress;
        }
      },

②监听进度百分比

后台进度前台进度条显示

参考文章：后台进度前台显示进度条_weixin_30646505的博客-优快云博客

后端思路：

①创建一个类，封装进度变量

②创建一个全局map，用于存放不同用户的进度数据，key为用户的id(一定唯一)，value即为进度条的实际进度

 private Map<Long,Percentage> map=new HashMap<>();

③主方法执行操作，每完成一步操作即进度加一

④辅助方法返回当前操作的进度

前端思路：

①主请求请求操作

② 辅助请求为定时任务，每隔一段时间去请求操作的进度

var proNum = setInterval(function(){
        me.$http({
        url: me.$http. adornUrl(`/bim/ifcdata/parse/percentage/${id}`),
        method: 'get',
        params: me.$http.adornParams({})
        }).then(({data})=>{
            if(data.msg == "success"){
              var prog = data.data;
              console.log("num => "+prog);
              me.percentage = Math.round(( prog / me.total) * 100, 2);
              console.log("percentage =>"+ me.percentage);
              if(me.percentage == 100){
                proNum="";
              }
            }
        })
      },3000);