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

本篇内容主要讲解“JavaScript如何实现监控上传和下载进度”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript如何实现监控上传和下载进度”吧!

一、写在前面

网路的不稳定性，网速的变化，会导致有时一个请求可能需要很长的的时间，而这个过程如果没有相应的提示，让用户感知进度，这可能是一种糟糕的体验。这在体现请求进度，加载进度的需求，在文件上传下载业务中，更为强烈。

下面从 XHR 请求和 axios 两个角度，分析如何实现监控请求进度，获取文件上传下载进度。

tips：上传下载进度监控，不应仅仅是数据传输进度比的获取，还应包括传输过程可能出现的状态。

二、xhr 监控进度

XHR 的出现，在 web应用发展历史上是具有里程碑意义的，它使得 DHTML 的 D 更加真实。此外，ajax 和 axios 本质上也是一种对 XHR 的封装实现。在 js 中我们无须依赖第三方插件，就可以实现异步请求，因为有 XHR（new XMLHttpRequest()），这有时很有用。所以，几遍在项目中可能很少再使用 XHR，而是使用它的某种实现，例如 axios 或 ajax，了解 XHR 也是有意义的。

XHR 在监控请求进度上，其实提供了方便的API，下面是和 XHR 进度相关的事件：

上面的事件就可以方便用于监控请求进度，请求状态，progress 可能更为常用，这常常结合进度回调的 event.loaded 和 event.total， 来获取进度的百分比。

①使用 XHR 监控下载进度示例：

  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("该请求已经被取消");  }  // ...其他内容

tips：注意，需要在请求调用 open() 之前添加事件监听，否则 progress 事件将不会被触发。

②使用 XHR 监控上传进度示例：

progress 事件同时存在于下载和上传的传输。下载进度监控示例就如同上面的示例， 下面是上传相关事件在 XMLHttpRequest.upload 对象上被触发的示例：

    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("取消上传");    }

三、axios 监控进度

axios 提供了方便的 api 去获取请求的进度：

// `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        })      }

到此，相信大家对“JavaScript如何实现监控上传和下载进度”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！