vue 上传进度显示

参考资料：

　　https://ask.csdn.net/questions/767017

　　https://www.cnblogs.com/best-fyx/p/11363506.html

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

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

handleProgressing(event, file, fileList) {

      var per = (event.loaded * ) / event.total

      var size = event.total /  /

      this.step = 2.77

      this.timeSpan = 

      per = per * 0.75

      if (per > 72.1) {

        if (!this.isTimer)

          if (size > ) {

            this.step = 1.43

            this.timeSpan =

          }

        if (size > ) {

          this.step = 0.43

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.33

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.21

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.17

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.09

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.07

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.06

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.05

          this.timeSpan =

        }

        if (size > ) {

          this.step = 0.03

          this.timeSpan =

        }

       //一定在这里定义timer变量，然后在定时器里面清除，不然不好用

        var isTimer1 = setInterval(() => {

          if (this.p >= ) 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() + '%'

          console.log(this.processStr)

          if ((this.processStr = '100%')) {

            console.log('window')

            window.clearInterval(isTimer1)

          }

        }, this.timeSpan)

        // console.log(' this.isTimer')

        // console.log(this.isTimer)

      } else {

        this.processStr = per.toFixed() + '%'

      }

    }

上传成功的方法：

    successlUpload() {

      this.processStr = '100%' //设置这个标志位，定时器里面的清除逻辑就会执行

      this.isTimer =

      this.$refs.uploadFile.abort()

      this.uploading = false

    },

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

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

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

　　　 2.接口把文件上传到azure

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

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

巴特西

vue 上传进度显示

最新文章

热门文章