基于vue+element-ui实现上传进度条-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于vue+element-ui实现上传进度条。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

后台进度前台进度条显示

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

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

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

 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;
        }
      },

②监听进度百分比

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

后台进度前台进度条显示

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

后端思路：

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

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

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

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

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

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

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

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

前端思路：

①主请求请求操作

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

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

基于vue+element-ui实现上传进度条文章来源地址https://www.toymoban.com/news/detail-403028.html

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);

到了这里，关于基于vue+element-ui实现上传进度条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！