如何将HTML文件输入中的文件转为ReadableStream并逐块读取？

核心实现方案 #

HTML的File对象原生支持stream()方法，可直接获取ReadableStream，无需额外转换。你只需修改现有迭代器函数，将输入从URL替换为File对象，替换掉原有的fetch逻辑即可，完美适配3GB级大文件的逐块读取需求。

修改后的完整代码 #

async function* makeTextFileLineIterator(file) {
  const utf8Decoder = new TextDecoder("utf-8");
  // 直接从File对象获取ReadableStream并生成读取器
  const reader = file.stream().getReader();
  let { value: chunk, done: readerDone } = await reader.read();
  chunk = chunk ? utf8Decoder.decode(chunk) : "";

  const newline = /\r?\n/gm;
  let startIndex = 0;
  let result;

  while (true) {
    const result = newline.exec(chunk);
    if (!result) {
      if (readerDone) break;
      const remainder = chunk.substr(startIndex);
      ({ value: chunk, done: readerDone } = await reader.read());
      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
      startIndex = newline.lastIndex = 0;
      continue;
    }
    yield chunk.substring(startIndex, result.index);
    startIndex = newline.lastIndex;
  }

  if (startIndex < chunk.length) {
    // 处理无换行符结尾的最后一行
    yield chunk.substr(startIndex);
  }
}

// 绑定file input的使用示例
document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  // 逐行遍历，找到目标行后可立即终止读取
  for await (const line of makeTextFileLineIterator(file)) {
    // 替换为你的日志匹配逻辑
    if (line.includes("目标日志关键词")) {
      console.log("找到目标行：", line);
      // 找到即停止，避免继续读取大文件
      break;
    }
  }
});

关键细节说明 #

• 零内存过载：通过File.stream()获取的ReadableStream会逐块读取文件，不会将整个3GB文件加载到内存中。
• 高效终止读取：因为仅需查找单条日志，找到目标行后用break终止迭代，读取器会自动停止后续文件读取，节省资源。
• 编码兼容性：保留原代码的TextDecoder逻辑，确保UTF-8编码的日志文件能正确解析。

内容的提问来源于stack exchange，提问作者Tomáš Zato