使用 FileReader (web api) 在浏览器中读取大文件

Question

我正在尝试读取所选文件的第一个字节。

但是当我选择一个大文件 (>100Mb) 时，我得到一个错误：“NotReadableError”。

请参阅下面的代码。 “数组缓冲区”真的是缓冲区还是只是将整个内容加载到内存中，我必须使用file#slice？

function readFile(file) {
  var reader = new FileReader();
  
  reader.onload = function() {
    var buffer = reader.result;
    var view = new Int8Array(buffer);
    try {
      view.forEach(function(v, index, array) {
        console.log(v);
        alert("ok - " + v);
        throw "BreakException";
      })
    } catch (e) {
      if (e!=="BreakException") throw e;
    }
  }
  
  reader.onerror = function() {
    alert("error");
    console.log(reader.error);
  }
  
  reader.readAsArrayBuffer(file);
}

var fileField = document.getElementById("file");

fileField.onchange = function(e) {
  var file = e.target.files[0];
  readFile(file);
}

<form>
  <input id="file" type="file"/>
</form>

Answer 1

ArrayBuffer 实际上是一个缓冲区，一个内存缓冲区。这就是缓冲区的工作方式。您的代码尝试将整个文件加载到内存中。要访问文件的特定范围而不将整个加载到内存中，您必须使用Blob.slice（文件实现 Blob 的所有方法）。