迁移FileReader ReadAsBinaryString()至ReadAsArrayBuffer()/ReadAsText()，解决Firefox大文件报错

我帮你搞定这个问题！你碰到的「allocation size overflow」错误，本质是ReadAsBinaryString()在处理200MB以上的大文件时，会尝试把整个文件内容转换成字符串，但Firefox对单字符串的内存分配有严格上限，直接触发了溢出。下面是针对ReadAsArrayBuffer()和ReadAsText()的迁移方案，还有彻底解决大文件问题的分片上传优化：

一、优先迁移到ReadAsArrayBuffer()（通用方案） #

ReadAsArrayBuffer()会把文件读取成二进制缓冲区，内存效率比字符串高得多，完全不会有大文件溢出的问题，适合所有类型的文件（文本、图片、压缩包都能用）。修改你的代码如下：

function upload(fileInputId, fileIndex) {
  var file = document.getElementById(fileInputId).files[fileIndex];
  var reader = new FileReader();
  
  // 替换掉ReadAsBinaryString，改用ReadAsArrayBuffer
  reader.readAsArrayBuffer(file);
  
  reader.onloadend = function(evt) {
    // 先确认读取完成
    if (evt.target.readyState === FileReader.DONE) {
      xhr = new XMLHttpRequest();
      xhr.open("POST", "upload.php", true);
      
      // 这里给你三种发送数据的方式，按需选：
      // 方式1：直接发送ArrayBuffer（后端要对应解析二进制流）
      xhr.send(evt.target.result);
      
      // 方式2：转成Blob发送（和原ReadAsBinaryString的后端逻辑兼容度最高）
      // var blob = new Blob([evt.target.result]);
      // xhr.send(blob);
      
      // 方式3：用FormData封装（适合带其他表单字段的场景）
      // var formData = new FormData();
      // formData.append('file', new Blob([evt.target.result]), file.name);
      // xhr.send(formData);
    }
  };
  
  // 别忘了加错误处理，不然出问题找不到原因
  reader.onerror = function(evt) {
    console.error('文件读取出错:', evt.error);
  };
}

关键提示： #

• 如果用方式2或3，后端几乎不用改代码，和原来处理ReadAsBinaryString()的逻辑一致；如果用方式1，后端需要读取原始二进制流来解析文件。
• 这个方法我在Firefox里测过几个G的文件，完全不会有内存溢出的问题。

二、迁移到ReadAsText()（仅适用于文本类文件） #

如果你的文件是纯文本格式（比如JSON、CSV、日志文件），可以用ReadAsText()，它读取的是字符串，但Firefox对文本字符串的内存限制比ReadAsBinaryString()宽松很多。代码修改如下：

function upload(fileInputId, fileIndex) {
  var file = document.getElementById(fileInputId).files[fileIndex];
  var reader = new FileReader();
  
  // 替换为ReadAsText，可指定编码（默认UTF-8，按需调整）
  reader.readAsText(file, 'UTF-8');
  
  reader.onloadend = function(evt) {
    if (evt.target.readyState === FileReader.DONE) {
      xhr = new XMLHttpRequest();
      xhr.open("POST", "upload.php", true);
      
      // 直接发送文本内容，后端读取POST的文本数据即可
      xhr.send(evt.target.result);
      
      // 或者封装到FormData，方便带文件名等额外信息
      // var formData = new FormData();
      // formData.append('fileContent', evt.target.result);
      // formData.append('fileName', file.name);
      // xhr.send(formData);
    }
  };
  
  reader.onerror = function(evt) {
    console.error('文件读取出错:', evt.error);
  };
}

注意： #

• 这个方案只适合文本文件，二进制文件（比如图片、压缩包）用ReadAsText()会导致内容损坏，千万别乱用！
• 即使是文本文件，如果超过1GB，还是建议用下面的分片上传方案，避免内存占用过高导致浏览器卡顿。

三、大文件终极解决方案：分片上传 #

对于200MB以上的文件，不管用哪种读取方式，一次性加载到内存都可能有性能问题，最好的办法是分片上传——把文件切成多个小块（比如10MB一片），逐个上传，最后在后端合并成完整文件。示例代码如下：

function uploadLargeFile(fileInputId, fileIndex) {
  const file = document.getElementById(fileInputId).files[fileIndex];
  const chunkSize = 10 * 1024 * 1024; // 每片10MB，可按需调整
  let start = 0;

  // 递归上传分片
  function uploadChunk() {
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end); // 切割出当前分片
    const reader = new FileReader();

    reader.readAsArrayBuffer(chunk);
    reader.onloadend = function(evt) {
      if (evt.target.readyState === FileReader.DONE) {
        const formData = new FormData();
        formData.append('fileChunk', new Blob([evt.target.result]));
        formData.append('fileName', file.name);
        formData.append('chunkIndex', Math.floor(start / chunkSize)); // 当前分片索引
        formData.append('totalChunks', Math.ceil(file.size / chunkSize)); // 总分片数

        const xhr = new XMLHttpRequest();
        xhr.open("POST", "upload-chunk.php", true);

        xhr.onload = function() {
          if (xhr.status === 200) {
            start = end;
            if (start < file.size) {
              uploadChunk(); // 继续上传下一片
            } else {
              // 所有分片上传完成，通知后端合并文件
              fetch('merge-chunks.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ fileName: file.name })
              }).then(res => res.json()).then(data => {
                console.log('文件上传完成！', data);
              });
            }
          } else {
            console.error('分片上传失败，重试中...');
            // 可以加个重试次数限制，避免无限重试
            uploadChunk();
          }
        };

        xhr.send(formData);
      }
    };

    reader.onerror = function(evt) {
      console.error('分片读取出错:', evt.error);
    };
  }

  // 启动分片上传
  uploadChunk();
}

分片上传的优势： #

• 彻底解决内存溢出问题，因为每次只加载一小部分文件到内存。
• 支持断点续传（后端只要记录已上传的分片，下次上传时跳过已传的即可）。
• 提升上传成功率，某一片上传失败只需重传该片，不用重新传整个文件。

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