使用AXIOS的ONUPLOADPROGRESS制作上传进度条--以及ONUPLOADPROGRESS的源码解读

1，从名字就可以看出来，这是允许为上传处理进度的事件。他是axios的请求配置之一。

axios({
        method: 'post',
        url: this.uploadurl,
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data' // 文件上传
        },
        //文件上传进度值
        onUploadProgress: function(progressEvent) {
          let complete = parseInt((progressEvent.loaded / progressEvent.total) * 100)
          that.percent = complete
        }
      })
        .then(data => {
          if (data.code == 200 && this.percent==100) {
            this.$message.info('上传成功！')
            this.fileList = []
            this.spinning = false
            this.intofloder(this.currentdir[this.currentdir.length - 1])
            let that = this
            //2秒后关闭上传窗口
            setTimeout(function(){
              that.upvisible=false
            },2000)
          } else {
            this.$message.info(data.message)
            this.spinning = false
          }
        })

2，progress.loaded表示当前上传的数据大小，progress.total表示整个要上传的数据大小。拿到当前上传数据的百分比后传给Element的进度条组件就可以实现啦