文件上传，进度条，如何实现？【关键在于监听上传的请求的某一个钩子函数】

### 该问题是怎么引起的？

### 1.vue文件上传进度条实现axios
参考：https://blog.csdn.net/weixin_43562688/article/details/105429283?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.control&spm=1001.2101.3001.4242
![输入图片说明](https://images.gitee.com/uploads/images/2021/0806/150230_4e2dbe39_7484906.png "屏幕截图.png")
~~~
axios({
							url: "你上传的URL",
							method: 'post',
							data: paramFormData,
							headers: {'Content-Type': 'multipart/form-data'},
							onUploadProgress: progressEvent => {
								// progressEvent.loaded:已上传文件大小
								// progressEvent.total:被上传文件的总大小
								//进度条
								that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
								}
							}).then(res => {
								if(res.data == "success" && that.progressPercent === 100){
									setTimeout(function() {
										that.$message({
								            message: '导入成功！',
								            type: 'success',
								            duration:'2000'
								        });
										that.progressFlag = false;
										that.progressPercent = 0
										that.$refs.upload.clearFiles();
									}, 1000);
								}
							}).catch(error => {
								that.progressFlag = false;
								that.progressPercent = 0
								that.$refs.upload.clearFiles();
								that.$message({
						            message: '导入失败！',
						            type: 'error',
						            duration:'2000'
						        });
							})
						}
					},
————————————————
版权声明：本文为CSDN博主「weixin_43562688」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43562688/article/details/105429283
~~~

### 2.ajax实现进度条
参考：https://www.cnblogs.com/onlymisaky/p/5425987.html
![输入图片说明](https://images.gitee.com/uploads/images/2021/0806/150036_bcab3d76_7484906.png "屏幕截图.png")

### 报错信息
~~~
 var fileObj = document.getElementById("f").files[0];
            //创建xhr
            var xhr = new XMLHttpRequest();
            var url = "upFile.ashx";
            //FormData对象
            var fd = new FormData();
            fd.append("path", "D:\\");    //上传路径
            fd.append("file", fileObj); 
            fd.append("acttime",new Date().toString());    //本人喜欢在参数中添加时间戳，防止缓存（--、）
            xhr.open("POST", url, true);
            xhr.send(fd);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    document.getElementById("result").innerHTML = result;
                }
            }
            //进度条部分
            xhr.upload.onprogress = function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    document.getElementById('progress').value = percentComplete;
                    document.getElementById('progressNumber').style.width = percentComplete + "%";
                }
            };
        }
~~~

### 手写上传进度条：[axios]

~~~
      
      <div class="line-box" v-if="progressBarFileName">
        <div class="line-left">
          
          <div class="line-icon"><i class="iconfont icon-doc"></i></div>
          
          <div class="line-doc-name">{{progressBarFileName}}</div>
        </div>
        
        <div class="line-content-box">
          
          <div class="line-content">
            <div class="line-in"></div>
            <div class="line-in-second" :style="'width:'+progressBarWidth+'%'"></div>
          </div>
        </div>
        <div class="line-right">
          
          
          
          <div>{{progressBarWidth}}%</div>
        </div>
      </div>
~~~

函数部分
~~~
    // 上传全部
    upAudio () {
      // this.formData.append('avatar', e.target.files[0])
      // console.log(e)
      if (this.price < -1) {
        // console.log(typeof (this.price))
        // console.log('***************************res**********', res)
        return this.$message({
          type: 'success',
          message: '请重新定价！！'
        })
      }
      console.log('this.imgPath++++++++++++++++', this.files)
      // for (let item of this.files) {
      //   this.formData.append('photos', item)
      // }
      this.formData.append('video', this.files[0])
      this.formData.append('background', this.imgPath[0])
      // this.formData.append('photos', this.imgPath) //注意这里this.imgPath = Array.from(e.target.files)好像没什么必要。此外这里formData接受数组不是这样直接apend就行！！！
      this.formData.append('message', this.message)
      this.formData.append('tags', this.tags)
      this.formData.append('price', this.price)
      this.formData.append('copyright', Number(this.copyright))
      // this.formData.append('tags', [])
      this.formData.forEach((value, key) => {
        // console.log('key %s: value %s', key, value)
        console.log('key value', key, value)
      })
      // console.log(this.message)
      // console.log(this.formData)
      // console.log(this.knowledge)
      // this.price = Number(this.price)
      // console.log(typeof (this.price))
      // console.log('this.price', this.price)
      const that = this
      request({
        method: 'post',
        url: `/api/work/audio`,
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.progressBarWidth = (progressEvent.loaded / progressEvent.total).toFixed(2) * 100
          // this.progressBarWidth = progressBarWidth
          console.log('progressEvent.loaded*************************', progressEvent.loaded)
          console.log('progressEvent.total*************************', progressEvent.total)
          // if (this.percentage >= 100){
          //   this.dialogVisible = true
          // }
        },
        data: this.formData
      }).then((res) => {
        if (res.statusCode === '200') {
          // console.log(typeof (this.price))
          console.log('***************************res**********', res)
          that.$message({
            type: 'success',
            message: '上传成功'
          })
          that.upcancel()
        }
      })
    },
~~~

张德政/vue_basic

内容风险标识

评论 (1)

张德政/vue_basic .gitee-modal { width: 500px !important; }

内容风险标识