本篇内容主要讲解“JavaScript如何实现监控上传和下载进度”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript如何实现监控上传和下载进度”吧!
网路的不稳定性,网速的变化,会导致有时一个请求可能需要很长的的时间,而这个过程如果没有相应的提示,让用户感知进度,这可能是一种糟糕的体验。这在体现请求进度,加载进度的需求,在文件上传下载业务中,更为强烈。
下面从 XHR 请求和 axios 两个角度,分析如何实现监控请求进度,获取文件上传下载进度。
tips:上传下载进度监控,不应仅仅是数据传输进度比的获取,还应包括传输过程可能出现的状态。
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 提供了方便的 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如何实现监控上传和下载进度”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。