axios上传文件获取上传进度

最近在做上传视频，因为视频比较大，耗时较长，要是没有个进度的话，用户漫长等待，体验不好，所以就想实时显示上传进度。

要点是发送请求是配置onUploadProgress：

 onUploadProgress: progressEvent => {
     let persent = (progressEvent.loaded / progressEvent.total * 100 | 0)
      console.log(persent)
    },

完整上传代码如下：

//上传视频
async uploadVideo () {
  const {uploadFile} = this
  if(uploadFile){
    let param = new FormData() //创建form对象，私有，无法直接获取，只能通过get来查看其中的元素
    param.append('file',uploadFile)
    let config = {
      headers:{
        'Content-Type':'multipart/form-data',
      },
      transformRequest: [function (data) {
        return data
      }],
      onUploadProgress: progressEvent => {
        let persent = (progressEvent.loaded / progressEvent.total * 100 | 0)		//上传进度百分比
        console.log(persent)
      },
    }
    axios.post('http://xxxxxxxx/video/upload',param,config)	//地址写你们自己的接口
      .then(response=>{
        var result = response.data
        if(result.status == 0){
          console.log(result)
        }else{
          this.$message({
            message: '上传失败',
            type: 'error',
            duration:'1000'
          });
        }
      }).catch(err => {
        console.log(err)
      })
    }
},

效果：

打印输出百分比：

配合element-ui的进度条：

希望能够帮到你们一点哈。