JavaScript Fetch API 中怎么上传文件并监控上传进度-js教程-PHP中文网

javascript中fetch api上传文件并监控进度需用readablestream包装文件流，逐块读取并实时上报进度，服务端须支持流式接收，旧浏览器应降级使用xmlhttprequest。

javascript fetch api 中怎么上传文件并监控上传进度

在 JavaScript 中使用 Fetch API 上传文件并监控进度，核心是利用 ReadableStream + TransformStream（或手动分块读取）配合 AbortController 和事件监听，但需注意：**原生 Fetch 不直接暴露上传进度事件**，必须通过包装请求体（如用 ReadableStream 构造自定义流）来实现边读边上报。

用 ReadableStream 包装文件并实时计算进度

这是目前最标准、兼容性较好（Chrome 109+、Firefox 117+、Safari 16.4+）的方式。原理是将 File 或 Blob 转为可读流，逐块读取并累加已上传字节数。

创建一个返回 ReadableStream 的函数，内部用 file.stream().getReader() 读取文件内容
每次 reader.read() 返回 chunk 后，立即通过 controller.enqueue(chunk) 推入新流，并更新进度值（如 uploaded += chunk.length）
将该流作为 fetch() 的 body，同时在读取循环中触发自定义进度回调（如 onProgress({ loaded, total })）

完整示例代码（含进度回调）

以下是一个可直接运行的封装函数：

async function uploadWithProgress(file, url, onProgress) {
  const reader = file.stream().getReader();
  const { readable, writable } = new TransformStream();
<p>const writer = writable.getWriter();
let loaded = 0;
const total = file.size;</p><p>async function pump() {
const { done, value } = await reader.read();
if (done) {
await writer.close();
return;
}</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">loaded += value.byteLength;
onProgress({ loaded, total, percent: Math.round((loaded / total) * 100) });

await writer.write(value);
await pump();

}

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

pump().catch(console.error);

const response = await fetch(url, { method: 'POST', body: readable, headers: { // 注意：使用流时不能设 Content-Length，后端需支持分块传输或流式解析 'Content-Type': file.type || 'application/octet-stream', }, });

return response; }

// 使用示例 const fileInput = document.querySelector('#file'); fileInput.addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return;

await uploadWithProgress(file, '/upload', ({ loaded, total, percent }) => { console.log(上传中：${percent}% (${loaded}/${total} bytes)

); // 可更新进度条 DOM，例如： // progressBar.style.width = ${percent}%; }); });

注意事项与替代方案

实际项目中需留意几个关键点：

服务端必须能接收流式请求：Node.js（Express 需搭配 raw-body 或 busboy）、Nginx 需配置 client_max_body_size 并禁用缓冲（proxy_buffering off），否则可能等待整个流结束才处理
不支持传统表单字段混合上传：若需同时传文本字段（如 title、desc），建议改用 FormData + XMLHttpRequest（它原生支持 upload.onprogress），或在服务端约定用 JSON 元数据 + 文件流分离传输
兼容性兜底方案：如需支持旧浏览器，仍推荐 XMLHttpRequest；现代项目可结合 AbortController 实现取消上传