Chrome HTML5 FileReader 尝试读取大文件时崩溃

Question

我有一个表单，允许用户选择要上传的 zip 文件。我试图在将这个 zip 文件上传到我的服务器之前对其进行客户端验证，因为上传可能需要一段时间，而且我还想节省带宽。

我需要做的就是读取 zip 中应包含的 .csv 文件，并验证 zip 中是否存在 .csv 引用的其他文件。为了实现这一目标，我尝试使用JSZip。

如果存档很小，这效果很好。如果存档很大（使用约 500MB 文件进行测试），则 Chrome 会崩溃。

var  reader = new FileReader();
reader.onload = function (e) {
  console.log("Got here!");
  // Read csv using JSZip, validate zip contents
};
reader.readAsArrayBuffer(file);

在我的代码中，我注释掉了 onload 回调中的所有逻辑，并验证这些逻辑都不会导致崩溃。我发现 Chrome 在调用 onload 回调之前就崩溃了。

我已经在 FireFox 中用更大的 zip 文件对此进行了测试，效果很好。

Answer 1

这是浏览器选项卡内存不足。

为了处理如此大的文件，您应该一次加载它的一部分：

使用File.slice(start, end + 1)，将结果读取Blob为ArrayBuffer，处理该块，然后确保不保留对其的引用，以便可以对其进行垃圾收集。

根据您对块的处理方式，您甚至可能需要设置超时，以便为车库收集器提供额外的时间来处理它。确保测试您支持的所有浏览器，因为有些浏览器可能会迫使您设置更大的超时或更小的块。另外，请记住，在过载的功能较弱的计算机上，垃圾收集可能需要更长的时间。

这是切片的一个很好的例子。当然，你会切成更大的碎片。您可能还希望将其与页面上的下一个示例结合起来，以便提供有关进度的反馈，其中包括除了当前块编号之外还从慢速/远程存储中获取块。