JavaScript实现监控上传和下载进度

  let xhr = new XMLHttpRequest();
  // 要监控请求进度，可以在 xhr 对象上注册进度相关的事件
  // 每个请求，开始都会触发 loadStart，结束都会触发 loadEnd 事件，它们之间，
  // 还可能会触发一个或多个其他事件，有些事件可能会多次触发。
  xhr.addEventListener("progress", updateProgress);
  xhr.addEventListener("load" , transferComplete);
  xhr.addEventListener("error", transferFailed  );
  xhr.addEventListener("abort", transferCanceled);
  xhr.open();
  // 服务端到客户端的传输进程（下载）
  function updateProgress (event) {
    // 如果 `lengthComputable` 属性的值是 false，那么意味着总字节数是未知并且 total 的值为零。
    if (event.lengthComputable) {
      let progress = event.loaded / event.total * 100;
      console.log('加载进度：' + progress + '%') // 一个百分比进度
    } else {
      // 总大小未知时不能计算进度信息
    }
  }
  function transferComplete(event) {
    console.log("传输完成");
  }
  function transferFailed(event) {
    console.log("传输失败");
  }
  function transferCanceled(event) {
    console.log("该请求已经被取消");
  }
  // ...其他内容

    let xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", updateProgress);
    xhr.upload.addEventListener("load" , transferComplete);
    xhr.upload.addEventListener("error", transferFailed  );
    xhr.upload.addEventListener("abort", transferCanceled);
    xhr.open();
    // 上传进度
    function updateProgress (event) {
      // 如果 `lengthComputable` 属性的值是 false，那么意味着总字节数是未知并且 total 的值为零。
      if (event.lengthComputable) {
        let progress = event.loaded / event.total * 100;
        console.log('上传进度：' + progress + '%') // 一个百分比进度
      } else {
        // 总大小未知时不能计算进度信息
      }
    }
    function transferComplete(event) {
      console.log("上传完成");
    }
    function transferFailed(event) {
      console.log("上传失败");
    }

    function transferCanceled(event) {
      console.log("取消上传");
    }

// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
    let num = progressEvent.loaded / progressEvent.total * 100 // 计算进度
    const loadingText = '进度：' + num + '%'
},

// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
    let num = progressEvent.loaded / progressEvent.total * 100 // 计算进度
    const loadingText = '进度：' + num + '%'
},

    <el-upload
      ref="upload"
      id="upload-box"
      action="void"
      :http-request="customUpload"
      :before-upload="handleBefore"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="handleSuccess"
      :with-credentials="true"
      accept="*"
      list-type="text"
      :show-file-list="false"
      :file-list="fileList">
    </el-upload>

      customUpload (file) {
        let FormDatas = new FormData()
        FormDatas.append('file', file.file)
        // 封装过的 axios 
        axios({
          method: 'post',
          url: this.$api.uploadFile, // 接口地址
          data: FormDatas,
          // 请求配置按需配置即可
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data;boundary=' + new Date().getTime()
          },
          // 上传进度
          onUploadProgress: (progressEvent) => {
            let num = progressEvent.loaded / progressEvent.total * 100 | 0 // 计算进度
            this.loadingText = '进度：' + num + '%'
            file.onProgress({percent: num}) // 进度条
          }
        }).then((res) => {
          res.code === 0 && file.onSuccess(res) // 上传成功(打钩的小图标)
        }).finally(() => {
          this.loading = false
        })
      }