本篇内容主要讲解“JavaScript如何实现监控上传和下载进度”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript如何实现监控上传和下载进度”吧!
一、写在前面
网路的不稳定性，网速的变化，会导致有时一个请求可能需要很长的的时间，而这个过程如果没有相应的提示，让用户感知进度，这可能是一种糟糕的体验。这在体现请求进度，加载进度的需求，在文件上传下载业务中，更为强烈。
下面从 XHR 请求和 axios 两个角度，分析如何实现监控请求进度，获取文件上传下载进度。
tips：上传下载进度监控，不应仅仅是数据传输进度比的获取，还应包括传输过程可能出现的状态。
二、xhr 监控进度
XHR 的出现，在 web应用发展历史上是具有里程碑意义的，它使得 DHTML 的 D 更加真实。此外，ajax 和 axios 本质上也是一种对 XHR 的封装实现。在 js 中我们无须依赖第三方插件，就可以实现异步请求，因为有 XHR（new XMLHttpRequest()），这有时很有用。所以，几遍在项目中可能很少再使用 XHR，而是使用它的某种实现，例如 axios 或 ajax，了解 XHR 也是有意义的。
XHR 在监控请求进度上，其实提供了方便的API，下面是和 XHR 进度相关的事件：
| 事件类型 | 说明 | 触发次数 |
|---|---|---|
| loadstart | 接收到响应数据时触发。 | 1次 |
| progress | 当请求接收到更多数据时，周期性地触发 | 0或多次 |
| error | 当 request 遭遇错误时触发。 | 0或多次 |
| abort | 当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。 | 0或多次 |
| load | XMLHttpRequest请求成功完成时触发。 | 0或多次 |
| loadend | 当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。 | 1次 |
上面的事件就可以方便用于监控请求进度，请求状态，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如何实现监控上传和下载进度”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
