React大文件上传：ReadableStream未触发Transfer-Encoding: chunked设置

针对你遇到的问题，核心原因大概率是自定义的post封装函数没有正确支持ReadableStream作为请求体，或者内部用了不支持流式上传的XMLHttpRequest。以下是具体的解决步骤和修正代码：

关键问题分析 #

• 原生fetch API支持直接传递ReadableStream作为请求体，此时浏览器会自动启用Transfer-Encoding: chunked，无需手动设置该头。
• 如果你的post函数内部基于XMLHttpRequest实现，它会自动将ReadableStream转换为Blob/Buffer，导致浏览器使用Content-Length而非分块编码。
• 额外的Blob中转步骤完全多余，File对象本身就自带stream()方法，直接调用即可获取可读流。

修正后的实现代码 #

// 直接使用File原生的stream方法，跳过Blob中转
const tarStream = tarFile.stream();

// 使用原生fetch发起请求，确保流式上传生效
fetch(upgradeUrl, {
  method: 'POST',
  body: tarStream,
  headers: {
    'Authorization': `Bearer ${oidcUser.access_token}`,
    'Content-Type': 'text/plain'
  }
})
.then(() => {
  console.log('upload completed');
})
.catch(error => {
  setErrorMessage(getGlopErrorMessage(error, t));
});

额外注意事项 #

1. 确认服务器支持分块编码：后端服务需要能够正确处理Transfer-Encoding: chunked的请求，否则会导致上传失败或数据解析错误。
2. 断点续传优化：对于20GB级别的大文件，建议添加断点续传逻辑——上传前先检查服务器已接收的文件片段，通过Range请求头续传未完成的部分，避免网络中断后重新上传整个文件。
3. 避免手动设置Content-Length：如果请求头中手动设置了Content-Length，浏览器会优先使用该头，从而禁用分块编码，确保你的请求配置中不包含这个头。

内容的提问来源于stack exchange，提问作者Krithika S