[JavaScript知识库] 基于vue+element-ui实现上传进度条

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 基于vue+element-ui实现上传进度条 -> 正文阅读

[JavaScript知识库]基于vue+element-ui实现上传进度条

基于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的博客-CSDN博客

后端思路：

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

②创建一个全局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);