Chrome/Edge中Fetch加载大本地CSV文件返回空串，Firefox正常

问题代码与场景 #

这段代码处理小CSV文件时所有浏览器都能稳定运行，但加载671MB的大文件时，Chrome和Edge的response.text()会返回空字符串，Firefox则完全正常：

// #csvfile是type为"file"的input元素
var selectedFile = document.getElementById("csvfile").files[0];
var file = window.URL.createObjectURL(selectedFile);
fetch(file)
  .then(response => response.text())
  .then(text => {...})

已尝试调整Fetch选项（mode: "same-origin"、headers: {"Content-Type": "text/plain"}），但问题依旧。

验证你的直觉的提示 #

你推测Chrome/Edge在流完全读入内存前就终止的方向是合理的，可通过以下方式验证：

• 手动读取流并监控进度：绕过response.text()，直接操作ReadableStream跟踪读取状态，看Chrome/Edge是否提前终止读取或出现内存异常：

  fetch(file)
    .then(response => {
      const reader = response.body.getReader();
      let receivedLength = 0;
      const chunks = [];
  
      return reader.read().then(function processChunk({ done, value }) {
        if (done) {
          console.log("读取完成，总字节数：", receivedLength);
          const fullBuffer = new Uint8Array(receivedLength);
          let offset = 0;
          for (const chunk of chunks) {
            fullBuffer.set(chunk, offset);
            offset += chunk.length;
          }
          const text = new TextDecoder().decode(fullBuffer);
          console.log("最终文本长度：", text.length);
          return text;
        }
  
        chunks.push(value);
        receivedLength += value.length;
        console.log(`已读取 ${receivedLength} / ${response.headers.get('content-length')} 字节`);
  
        return reader.read().then(processChunk);
      });
    })
    .then(text => {/* 后续逻辑 */})
    .catch(err => console.error("读取错误：", err));
  

  运行后查看Chrome/Edge控制台，若发现receivedLength远小于文件实际大小就进入done状态，或出现内存相关错误，就能验证你的推测。

• 检查内存占用：在Chrome中打开chrome://memory-internals/，观察读取大文件时的内存变化；对比Firefox的about:memory页面，看Chrome是否因为内存超限提前终止读取。

• 显式捕获错误：给Fetch链添加catch，排查是否有被忽略的内存不足或流中断错误：

  fetch(file)
    .then(response => response.text())
    .then(text => {/* 后续逻辑 */})
    .catch(err => console.error("Fetch错误：", err));
  

大文件的优化解决方案 #

大文件一次性读入内存本身就存在内存风险，推荐用流式读取+逐行解析的方式，避免内存溢出：

方案1：使用FileReader的进度事件

function parseLargeCSV(file) {
  const reader = new FileReader();
  reader.readAsText(file, "UTF-8");
  
  let remainingContent = "";

  // 监听读取进度，分批处理
  reader.onprogress = (e) => {
    if (e.loaded < e.total) {
      const currentChunk = remainingContent + reader.result.slice(remainingContent.length);
      const lines = currentChunk.split("\n");
      remainingContent = lines.pop(); // 保留不完整的最后一行
      
      // 处理每一行数据
      lines.forEach(line => {
        if (line.trim()) { // 跳过空行
          // 这里替换成你的业务逻辑
          console.log("解析行：", line.split(","));
        }
      });
    }
  };

  // 读取完成后处理剩余内容
  reader.onloadend = () => {
    if (remainingContent.trim()) {
      console.log("解析最后一行：", remainingContent.split(","));
    }
    console.log("文件解析完成");
  };

  reader.onerror = (err) => {
    console.error("文件读取失败：", err);
  };
}

// 调用方式
const selectedFile = document.getElementById("csvfile").files[0];
parseLargeCSV(selectedFile);

方案2：使用原生File.stream() API（现代浏览器支持）

async function streamParseCSV(file) {
  const stream = file.stream();
  const reader = stream.getReader();
  const decoder = new TextDecoder("UTF-8");
  let remainingContent = "";

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

    // 解码当前块，stream: true表示后续还有数据
    const chunk = decoder.decode(value, { stream: true });
    const fullText = remainingContent + chunk;
    const lines = fullText.split("\n");
    remainingContent = lines.pop();

    // 批量处理行
    for (const line of lines) {
      if (line.trim()) {
        console.log("解析行：", line.split(","));
      }
    }
  }

  // 处理最后一行
  if (remainingContent.trim()) {
    console.log("解析最后一行：", remainingContent.split(","));
  }
}

// 调用方式
const selectedFile = document.getElementById("csvfile").files[0];
streamParseCSV(selectedFile);

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