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

---

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

keywords:

• Fetch streaming upload
• ReadableStream
• duplex half
• 分块上传
• HTTP/2

description: 说明基于 ReadableStream 的请求体上传、必需的 duplex 配置、分块管线与服务端兼容注意事项，并提供示例与参考。

categories:

• 文章资讯
• 编程技术

---

概述

现代浏览器支持将 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-requests
• MDN fetch 上传流文档：https://developer.mozilla.org/docs/Web/API/fetch#upload_a_stream
• WHATWG Fetch 规范：https://fetch.spec.whatwg.org/