当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue 上传进度显示

vue 上传进度显示

2019年08月29日  | 移动技术网IT编程  | 我要评论

参考资料：

　　

　　

我使用的是element-ui中的 upload 上传 组件，最终效果

 

组件对应的 on-progress事件绑定的方法

     handleprogressing(event, file, filelist) {
        // console.log(event)
        // console.log(event.loaded)//total
        var per = event.loaded * 100 / event.total
        var size = event.total / 1024 / 1024

        this.step = 2.77
        this.timespan = 100

        if (size > 100) {
          this.step = 1.43
          this.timespan = 150
        }

        if (size > 200) {
          this.step = 0.43
          this.timespan = 300
        }

        if (size > 300) {
          this.step = 0.33
          this.timespan = 800
        }

        if (size > 400) {
          this.step = 0.23
          this.timespan = 1000
        }

        if (size > 500) {
          this.step = 0.17
          this.timespan = 1200
        }

        if (size > 600) {
          this.step = 0.09
          this.timespan = 1300
        }
　　　　　
        per = per * 0.75 
        if (per > 72.1) {
          if (!this.istimer)
            this.istimer = setinterval(() => {
              if (this.p >= 90)
                this.step = 0.01
              this.p = parsefloat(this.p) + this.step
              if (this.p >= 99.97)
                this.p = 99.99
              this.processstr = this.p.tofixed(2) + "%"
            }, this.timespan)
        } else {
          this.processstr = per.tofixed(2) + "%"
        }
        console.log(this.processstr)
      }

上传成功后把显示的字符串改为100%就可以了。

我这个写的原因是我的上传文件分两块。

过程： 1.vue上传文件到接口服务器（webapi）

　　　 2.接口把文件上传到azure

所以我把上传进度显示改为模拟的了，按照文件的大小设置上传进度的step。

你们直接报错到服务器的话可以不使用我代码的这一块。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网