Fetch 可读流上传与进度跟踪实践

概述现代浏览器支持以可读流作为请求体上传。本文提供从文件分块到进度跟踪的端到端示例。能力检测与上传const supportsRS = typeof ReadableStream === 'function'; function streamFromFile(file, size = 1024 * 1024, onProgress) { let o = 0, sent = 0; return new ReadableStream({ async pull(controller) { if (o >= file.size) { controller.close(); return; } const b = file.slice(o, o + size); const ab = await b.arrayBuffer(); const chunk = new Uint8Array(ab); controller.enqueue(chunk); o += size; sent += chunk.length; onProgress && onProgress(sent); } }); } async function upload(url, file) { if (!supportsRS) throw new Error('streams unsupported'); const body = streamFromFile(file, 1024 * 512, s => console.log('sent', s)); const res = await fetch(url, { method: 'POST', body }); if (!res.ok) throw new Error('upload failed'); }