如何在客户端TypeScript中复用缓冲区分块读取大文件？

问题分析 #

你遇到的TypeError: attempting to access detached ArrayBuffer，是因为BYOBReader在完成读取后，会分离传入的Uint8Array视图及其底层ArrayBuffer（部分浏览器实现中，缓冲区会被直接标记为不可用），导致无法复用原缓冲区。虽然MDN文档提到返回的value视图指向同一内存，但实际浏览器行为可能让原缓冲区无法二次使用。

以下是几种可行的解决方案：

方案一：调整BYOBReader使用逻辑，复用可用缓冲区 #

通过每次读取后更新缓冲区为返回值的可用buffer，避免使用已被分离的旧缓冲区：

async readChunks(file: File) {
  const CHUNK_SIZE = 64 * 1024; // 根据需求调整块大小
  let buffer = new ArrayBuffer(CHUNK_SIZE);
  const reader = file.stream().getReader({ mode: 'byob' });

  try {
    while (true) {
      // 基于当前可用buffer创建新视图，避免使用已分离的旧视图
      const view = new Uint8Array(buffer, 0, CHUNK_SIZE);
      const { done, value } = await reader.read(view);

      if (done) break;
      
      if (value) {
        handleData(value); // value是填充后的有效视图
        buffer = value.buffer; // 更新buffer为当前可用的内存区域
      }
    }
  } finally {
    reader.releaseLock(); // 确保释放阅读器锁
  }
}

方案二：使用FileReader分块读取+固定缓冲区复制 #

这种方式兼容性更强，通过手动控制文件切片，将读取到的临时数据复制到固定缓冲区，彻底避免缓冲区频繁分配：

async readChunks(file: File) {
  const CHUNK_SIZE = 64 * 1024;
  const fixedBuffer = new ArrayBuffer(CHUNK_SIZE);
  const fixedView = new Uint8Array(fixedBuffer);
  let offset = 0;

  while (offset < file.size) {
    // 截取文件的下一个块
    const chunk = file.slice(offset, offset + CHUNK_SIZE);
    // 读取块数据
    const chunkBuffer = await readChunkAsArrayBuffer(chunk);
    
    // 将临时块数据复制到固定缓冲区
    const actualReadSize = Math.min(chunkBuffer.byteLength, CHUNK_SIZE);
    fixedView.set(new Uint8Array(chunkBuffer), 0);
    
    // 处理固定缓冲区中的有效数据（注意实际长度是actualReadSize）
    handleData(fixedView.subarray(0, actualReadSize));
    
    offset += chunkBuffer.byteLength;
  }
}

// 辅助函数：封装FileReader为Promise
function readChunkAsArrayBuffer(chunk: Blob): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as ArrayBuffer);
    reader.onerror = () => reject(reader.error);
    reader.readAsArrayBuffer(chunk);
  });
}

这个方案的核心是复用fixedBuffer，仅在每次读取时生成临时的小块缓冲区，然后复制到固定缓冲区中，大幅减少垃圾回收压力。

第三方库推荐 #

如果不想手动实现，可考虑轻量级的前端文件分块处理库：

• file-chunk-reader：专注于文件分块读取，支持自定义块大小和缓冲区复用配置
• web-streams-polyfill：如果目标浏览器对BYOBReader支持不佳，该polyfill可标准化流行为，让方案一的逻辑更稳定

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