zoukankan      html  css  js  c++  java
  • 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 * 100) / event.total
          var size = event.total / 1024 / 1024
          this.step = 2.77
          this.timeSpan = 100
    
          per = per * 0.75
          if (per > 72.1) {
            if (!this.isTimer)
              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.21
              this.timeSpan = 1000
            }
    
            if (size > 500) {
              this.step = 0.17
              this.timeSpan = 1200
            }
    
            if (size > 600) {
              this.step = 0.09
              this.timeSpan = 1300
            }
            if (size > 900) {
              this.step = 0.07
              this.timeSpan = 1400
            }
    
            if (size > 1300) {
              this.step = 0.06
              this.timeSpan = 1400
            }
    
            if (size > 1500) {
              this.step = 0.05
              this.timeSpan = 1600
            }
    
            if (size > 1800) {
              this.step = 0.03
              this.timeSpan = 1800
            }
         var that = this;   
           //一定在这里定义timer变量,然后在定时器里面清除,不然不好用
            var isTimer1 = setInterval(() => {
              if (that.p >= 90) that.step = 0.01
              that.p = parseFloat(that.p) + that.step
              if (that.p >= 99.97) that.p = 99.99
              that.processStr = that.p.toFixed(2) + '%'
    
              console.log(that.processStr)
              if ((that.processStr = '100%')) {
                console.log('window')
                window.clearInterval(isTimer1)
              }
            }, that.timeSpan)
            // console.log(' this.isTimer')
            // console.log(this.isTimer)
          } else {
            this.processStr = per.toFixed(2) + '%'
          }
        }

    上传成功的方法:

        successlUpload() {
          this.processStr = '100%' //设置这个标志位,定时器里面的清除逻辑就会执行
          this.isTimer = 0
          this.$refs.uploadFile.abort()
          this.uploading = false
        },

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

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

    过程: 1.vue上传文件到接口服务器(webapi)

        2.接口把文件上传到azure

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

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

  • 相关阅读:
    linux recv 返回值与linux socket 错误分析
    位域
    mysql修改root密码的方法
    mysql Plugin ‘InnoDB’ init function returned error
    centos查看版本
    CentOS 7.0 使用 yum 安装 MariaDB 及 简单配置
    CentOS 7.X 中systemctl命令用法详解
    phpMyAdmin关于PHP 5.5+ is required. Currently installed version is: 5.4.16问题
    linux下tar.gz、tar、bz2、zip等解压缩、压缩命令小结
    自动设置IP地址bat脚本
  • 原文地址:https://www.cnblogs.com/dawenyang/p/11429157.html
Copyright © 2011-2022 走看看