制作文件上传进度条

先看原生js怎么做

关键点： 监听请求的upload.onprogress事件

  // 发请求
  const ajax = (url: string, data: FormData) => {
    return new Promise((resolve, reject) => {
      const request = new XMLHttpRequest();
      request.open('POST', url);
      request.onreadystatechange = () => {
        if (document.readyState === 'complete' && request.status === 200) {
          resolve(request.response);
        } else {
          reject(new Error('上传失败'));
        }
      };
      request.upload.onprogress = (e: ProgressEvent) => {   //这里可以获取进度条的信息
        console.log(`${e.loaded/ e.total*100 ||0}%`)
      };
      request.send(data);
    });
  };

axios做进度条

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

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)
      })
    }
},