如何通过重写Blob实现单XHR请求上传流式随机数据？

首先得明确：直接重写Blob构造函数是行不通的。浏览器的XMLHttpRequest内部依赖原生Blob的底层实现，你自定义的Blob函数返回的对象没有原生Blob的内部数据结构和读取接口，XHR根本没法正确识别并发送它的内容——这就是你覆盖后服务器收不到数据的核心原因。

不过你想要的「单个XHR请求流式上传数据」完全可以实现，不用折腾Blob重写，用浏览器原生的**ReadableStream**就可以搞定，这是专门为流式数据处理设计的标准API。

实现步骤示例 #

下面是一个完整的示例，用ReadableStream生成流式随机数据，通过单个XHR请求完成上传：

// 配置参数
const uploadUrl = "你的服务器上传地址";
const chunkSize = 1024; // 每个数据块的大小（单位：字节）
const totalChunks = 100; // 总共要上传的块数（可按需调整，甚至做成无限流）

// 创建生成随机数据的ReadableStream
const stream = new ReadableStream({
  async start(controller) {
    let chunkCount = 0;
    while (chunkCount < totalChunks) {
      // 生成二进制随机数据块
      const randomChunk = new Uint8Array(chunkSize);
      crypto.getRandomValues(randomChunk);
      
      // 将数据块加入流
      controller.enqueue(randomChunk);
      chunkCount++;
      
      // 可选：模拟延迟，避免瞬间发送所有数据
      await new Promise(resolve => setTimeout(resolve, 50));
    }
    // 所有数据块发送完毕，关闭流
    controller.close();
  }
});

// 发起XHR请求并发送流
const oReq = new XMLHttpRequest();
oReq.open("POST", uploadUrl, true);
oReq.onload = function(oEvent) {
  console.log("上传完成！服务器响应:", oReq.responseText);
};
oReq.onerror = function(error) {
  console.error("上传出错:", error);
};

// 发送ReadableStream（现代浏览器均支持XHR直接发送流）
oReq.send(stream);

关键说明 #

• ReadableStream允许你按需生成数据块，流式推送给XHR，不需要一次性把所有数据加载到内存，非常适合处理大文件或动态生成的随机数据。
• 如果需要兼容旧浏览器（比如IE），可以考虑用XMLHttpRequest的分块写入（配合send()多次调用，但需要开启multipart模式），但现代浏览器优先推荐ReadableStream方案。
• 服务器端需要支持接收流式数据（比如Node.js用req.on('data')处理，Java用ServletInputStream等），否则无法正确处理分块传来的数据。

补充：为什么重写Blob不行？ #

原生Blob是浏览器内置的特殊对象，它内部有不可见的底层存储逻辑和标准读取接口（比如slice()的底层实现）。你自定义的函数返回的只是普通JS对象，没有这些原生能力，XHR在尝试读取数据时会直接失败，自然服务器收不到任何内容。所以不要试图重写原生Blob构造函数，用标准流式API才是正确方向。

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