javascript如何实现文件上传_进度监控怎样完成

幻影之瞳 2025-12-22 00:00:00 次阅读

推荐使用 XMLHttpRequest 实现文件上传进度监控，通过 xhr.upload.onprogress 事件获取 loaded 和 total 计算百分比；Fetch 需 ReadableStream 手动处理且兼容性差；注意 CORS、分片上传、并发控制及移动端兼容性。

JavaScript 实现文件上传并监控进度，核心是使用 XMLHttpRequest（或 Fetch API 配合 ReadableStream）配合 progress 事件。现代浏览器中推荐用 XMLHttpRequest.upload.onprogress 获取上传进度，它能实时反馈已上传字节数。

使用 XMLHttpRequest 监控上传进度

这是最稳定、兼容性好且原生支持进度监听的方式：

创建 XMLHttpRequest 实例，调用 open('POST', url)
监听 xhr.upload.onprogress 事件，该事件对象含 loaded（已传字节数）和 total（总字节数）
计算进度百分比：Math.round((e.loaded / e.total) * 100)
注意：只有在发送 FormData（含文件）时，total 才有值；纯文本请求可能不触发 progress

用 Fetch + Upload Progress（需手动流式处理）

Fetch 本身不直接暴露上传进度，但可通过 ReadableStream + pipeTo 拦截上传数据流（仅 Chromium 120+ 和 Firefox 125+ 支持）：

将文件转为 ArrayBuffer 或使用 file.stream()
创建自定义 TransformStream，在 transform() 中累加已读字节并派发自定义进度事件
将处理后的流传入 fetch(url, { method: 'POST', body: processedStream })
实际项目中更推荐回退到 XMLHttpRequest，除非明确需要 Fetch 的其他特性（如 AbortSignal 统一控制）

关键细节与常见问题

避免踩坑，要注意以下几点：

CORS 配置：服务端必须返回 Access-Control-Allow-Origin，且若带 Cookie 还需设置 credentials: 'include'
大文件分片上传：单次上传受网络/超时限制，真实场景建议结合 MD5 校验、断点续传、分块并发（如每块 2MB）
多文件并发控制：避免同时上传过多文件拖垮浏览器，可用 PromisePool 限流（如最多 3 个并发）
移动端兼容性：iOS Safari 对 upload.onprogress 支持良好，但部分旧版本可能只在完成时触发一次，建议降级显示“上传中…”状态

一个最小可用示例（XMLHttpRequest）

HTML 中放一个和进度条：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
document.querySelector('progress').value = percent;
}
};
xhr.onload = () => {
if (xhr.status === 200) console.log('上传成功');
};
xhr.open('POST', '/upload');
xhr.send(new FormData());
});

不复杂但容易忽略的是：确保后端正确接收 multipart/form-data，并返回合适的状态码与响应头。前端进度只是“发出多少”，不代表服务端已写入磁盘——最终结果仍需靠 onload 或 onerror 确认。