IE11 中的 FileReader readAsArrayBuffer 不适用于大文件答案

【问题标题】：FileReader readAsArrayBuffer in IE11 not working for large filesIE11 中的 FileReader readAsArrayBuffer 不适用于大文件
【发布时间】：2018-01-22 13:39:12
【问题描述】：

我已使用文件读取器对象将文件转换为数组缓冲区。在 IE11 中，它适用于最大 20mb 的文件。但不适用于 200mb 文件，它会导致 null 而不是数组缓冲区值。下面提到了我的代码

      var fr = new FileReader();
      //reads in the file using the fileReader HTML5 API (as an ArrayBuffer) - readAsBinaryString is not available in IE!
      fr.readAsArrayBuffer(file); 

      fr.onload = (evt:any) => {
        console.log(evt.target.result);// it returns only null for 200mb file
      }

值得赞赏的宝贵回应。

【问题讨论】：

readAsArrayBuffer 会将整个文件读入内存，所以 IE 可能对此有一些限制。您可能面临的另一个问题是服务器端，可能在发送整个文件之前超时等。您到底在做什么？
我认为这可能是 IE 限制问题，在将缓冲区发布到服务器之前它在转换为缓冲区时变为空值

标签： javascript arraybuffer

【解决方案1】：

您可以使用文件对象的slice 方法绕过限制。

直接从文件 blob 中将文件切片成更小的部分，然后使用 FileReader 读取每个切片。这样你就可以绕过限制。您可以使用Blob([part1, part2, ...], {}) 将每个生成的部分重新合并在一起。

缓冲示例

document.querySelector("input").onchange = function() {
  var parts = [];                                    // hold the sliced ArrayBuffer parts
  var file = this.files[0];                          // shortcut to file
  var fileSize = file.size;                          // total size of file
  var sliceSize = 1<<23;                             // slice size, here 8 mb
  var count = Math.ceil(fileSize / sliceSize);       // calc number of parts
  var index = 0;                                     // part/slice index
  
  console.log("File size:", fileSize);
  
  (function _slice() {                               // async "loop"
    var start = index * sliceSize;                   // calc start pos. of current slice
    var end = Math.min(start + sliceSize, fileSize); // calc end pos. of current slice
    var slice = file.slice(start, end);              // slice the file blob to new blob
    var fr = new FileReader();                       // read blob part as ArrayBuffer
    fr.onload = function() {
      parts.push(this.result);                       // store ArrayBuffer part
      index++;                                       // next slice
      console.log("Read part: " + index);
      if (index < count) _slice();                   // more slices? keep calm slice on
      else done(parts);                              // we're done, use some callback
    };
    // todo handle errors
    fr.readAsArrayBuffer(slice);                     // convertt blob->ArrayBuffer
  })()
};

function done(parts) {
  // todo: use ArrayBuffer parts here, then merge to new blob
  console.log("Blob size:", new Blob(parts).size);
}

&lt;label&gt;Select some large file: &lt;input type=file&gt;&lt;/label&gt;

【讨论】：