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

使用原生XHR 监控下载进度示例

tips：注意
1.需要在请求调用 open() 之前添加事件监听，否则 progress 事件将不会被触发。
2. XHR 未设置默认的超时限制，这意味着理论上一个请求的进度可以无限长。但实践中，应该设置合理的超时限制， 并对相应的错误做处理。
3.服务器必须在响应中提供 Content-Length（内容长度）首部，才能对传输数据估算从传输进度。

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("该请求已经被取消");
}


事件类型说明	                                                                    触发次数
loadstart	接收到响应数据时触发。	                                            1次
progress	当请求接收到更多数据时，周期性地触发	                                0或多次
error	    当 request 遭遇错误时触发。	                                        0或多次
abort	    当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。	0或多次
load	    XMLHttpRequest请求成功完成时触发。	0或多次
loadend	    当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。

axios 监控进度

// `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 + '%'
},


下面是一个 axios 结合 element-ui 的 el-upload 组件的使用示例

<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
  })
}
//下面onDownloadProgress展示的是下载进度，上传的话切换成onUploadProgress监听钩子函数

export function exportFile(params,showProgess){
    return request({
      url: api.exportexceldata,
      method: 'post',
      data: params,
      responseType:'blob',
      onDownloadProgress: (progressEvent)=> {
        showProgess(progressEvent)
      },
  })
}
//在method的里面使用
//定义一个方法用来作为下载方法的形参并且接受返回值
 showProgess(progress){
    //获取实时进度
     this.progress = progress.loaded / progress.total
 },
 downloadFile(id){
   //数据初始化0
    this.progress=0
    exportFile(option,this.showProgess).then((res)=>{ // 此处调用
})

页面中使用 <a-progress  :percent="progress" :showInfo="false"/>