客户端超大File文件（＞2GB）分片读取上传的JavaScript API选型及内存占用疑问

嘿，这个问题问得很到位！其实你提到的Blob.slice() + FileReader.readAsArrayBuffer()组合完全可以做到只把当前分片加载到内存，不会一次性把整个大文件塞进内存里——这得先给你吃个定心丸。

你可能误解了FileReader.readAsArrayBuffer()的工作方式，它并不是先把整个File读进内存再处理，而是只读取你通过slice()切出来的那一段数据。因为File本身就是Blob的子类，slice()方法只是创建了一个指向原文件某段范围的“引用”，并没有复制整个文件内容，真正的读取操作是在调用readAsArrayBuffer()的时候才发生的，而且只会读取slice指定的那部分。

举个简单的示例代码，帮你理解怎么实现1MB分片的顺序上传：

async function uploadInChunks(file, chunkSize = 1024 * 1024) {
  let offset = 0;
  const fileSize = file.size;

  while (offset < fileSize) {
    // 切出当前分片，仅创建原文件的范围引用，不复制数据
    const chunk = file.slice(offset, offset + chunkSize);
    // 读取当前分片到ArrayBuffer，此时仅该1MB数据进入内存
    const arrayBuffer = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsArrayBuffer(chunk);
    });
    
    // 执行分片上传逻辑，这里用fetch举例
    await fetch('/upload', {
      method: 'POST',
      body: arrayBuffer,
      headers: {
        'X-Chunk-Offset': offset,
        'X-File-Size': fileSize
      }
    });

    offset += chunkSize;
    console.log(`已上传 ${Math.min(offset, fileSize)} / ${fileSize}`);
  }
}

另外，如果你偏好更现代的API，也可以用Blob.stream()方法，它返回一个ReadableStream，通过流的方式逐段读取，内存控制会更精细，代码也更简洁：

async function uploadWithStream(file, chunkSize = 1024 * 1024) {
  const stream = file.stream();
  const reader = stream.getReader();
  let offset = 0;

  while (true) {
    const { done, value } = await reader.read(new Uint8Array(chunkSize));
    if (done) break;

    // value就是当前分片的Uint8Array，仅该段数据占用内存
    await fetch('/upload', {
      method: 'POST',
      body: value,
      headers: {
        'X-Chunk-Offset': offset,
        'X-File-Size': file.size
      }
    });

    offset += value.length;
    console.log(`已上传 ${offset} / ${file.size}`);
  }
}

流处理本身就是为大文件场景设计的，内存占用会更稳定，不容易出现意外的内存飙升问题。

总结一下：不管是用slice()+FileReader还是stream()方案，都不会把整个大文件加载到内存中——它们都是按需读取当前需要的分片，处理完成后这段内存就可以被回收，完全适配几GB甚至更大的文件处理需求。

备注：内容来源于stack exchange，提问作者MrSnrub