Fetch 上传流：ReadableStream 与分块上传实践

概述现代浏览器支持将 `ReadableStream` 作为 `fetch` 的请求体，实现大文件分块上传与边生产边上传。需要设置 `duplex: 'half'` 并满足服务器的流式处理能力。示例const source = new ReadableStream({

start(controller) {

const chunk = new Uint8Array(1024)

controller.enqueue(chunk)

controller.close()

}

})

await fetch('/upload', {

method: 'POST',

body: source,

duplex: 'half',

headers: { 'Content-Type': 'application/octet-stream' }

})

工程建议服务器支持：保证后端在 H2/H3 下正确处理分块请求体；对反向代理配置缓冲与限流。可靠性：失败重试与断点续传；记录吞吐与时延。兼容：特性检测与降级；Safari 等浏览器差异需评估。参考与验证web.dev Streaming requests 指南：https://web.dev/articles/streaming-requestsMDN fetch 上传流文档：https://developer.mozilla.org/docs/Web/API/fetch#upload_a_streamWHATWG Fetch 规范：https://fetch.spec.whatwg.org/