我要评论ajax 上传/下载进度监控实现方法
xmlhttprequest 进度监控
xmlhttprequest 对象的 progress 事件可用于监控上传和下载进度。需要区分 upload 和 download 事件：
const xhr = new xmlhttprequest();
xhr.open('post', '/upload');
// 上传进度监控
xhr.upload.onprogress = function(e) {
if (e.lengthcomputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`上传进度: ${percent}%`);
}
};
// 下载进度监控
xhr.onprogress = function(e) {
if (e.lengthcomputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`下载进度: ${percent}%`);
}
};
xhr.send(formdata);
fetch api 进度监控
fetch api 通过读取 readablestream 实现进度监控：
fetch('/download')
.then(response => {
const reader = response.body.getreader();
const contentlength = +response.headers.get('content-length');
let receivedlength = 0;
return new promise((resolve, reject) => {
function processchunk({ done, value }) {
if (done) {
resolve();
return;
}
receivedlength += value.length;
console.log(`下载进度: ${(receivedlength/contentlength)*100}%`);
return reader.read().then(processchunk);
}
reader.read().then(processchunk);
});
});
axios 进度监控
axios 提供了更简洁的进度监控接口：
axios.post('/upload', formdata, {
onuploadprogress: progressevent => {
const percent = math.round(
(progressevent.loaded * 100) / progressevent.total
);
console.log(`上传进度: ${percent}%`);
},
ondownloadprogress: progressevent => {
const percent = math.round(
(progressevent.loaded * 100) / progressevent.total
);
console.log(`下载进度: ${percent}%`);
}
});
进度条ui实现
结合前端框架实现可视化进度条：
<div class="progress-bar">
<div class="progress" style="width: 0%"></div>
</div>
<script>
function updateprogressbar(percent) {
document.queryselector('.progress').style.width = `${percent}%`;
}
</script>
断点续传实现
通过记录已传输的字节数实现断点续传：
// 上传时添加range头
headers: {
'range': `bytes=${resumebyte}-`
}
// 服务器响应206 partial content
错误处理
必须添加错误处理逻辑保证健壮性：
xhr.onerror = function() {
console.error('传输失败');
};
fetch().catch(error => {
console.error('请求失败:', error);
});
注意事项
- 确保服务器正确返回
content-length头信息 - 跨域请求需要服务器配置
access-control-expose-headers - 大文件传输建议分块处理
- 进度信息可能需要节流(throttle)避免频繁ui更新
总结
到此这篇关于ajax上传下载进度监控完全攻略的文章就介绍到这了,更多相关ajax上传下载进度监控内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论