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

Question

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

但是当我 select 一个大文件 (>100Mb) 时，我得到一个错误："NotReadableError"。

查看下面的代码。 "array buffer" 真的是一个缓冲区还是它只是将所有内容加载到内存中，我必须使用 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 的所有方法），正如您所怀疑的那样。

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

Read huge files in browser using FileReader (web api)

javascript

filereader

asp.net-web-api