5

I have a form that allows users to select a zip file for upload. I'm trying to do client-side validation of this zip file before it is uploaded to my server since the upload might take a while and I'd also like to conserve bandwidth.

All I need to do is read a .csv file that should be included in the zip, and verify the presence of other files in the zip that are referenced in the .csv. To accomplish this, I am trying to use JSZip.

If the archive is small, this works great. If the archive is large (testing with ~500MB file) then Chrome crashes.

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

In my code I've commented out all of the logic in my onload callback and verified that none of that is causing the crash. I've discovered that Chrome crashes before the onload callback is ever called.

I've tested this in FireFox with much larger zip files and it works fine.

4

1 回答 1

2

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

为了处理这么大的文件，您应该一次加载它的切片：

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

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

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

于 2017-10-03T00:03:37.613 回答