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。

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

 

posted @   大稳·杨  阅读(6137)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示