Question

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

＆＃13;

      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
      }

＆＃13;

值得赞赏的宝贵回应。

Answer 1

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

直接从文件blob将文件切割成较小的部分，然后使用FileReader读取每个切片。这样你就可以达到极限。您可以使用Blob([part1, part2, ...], {})将每个结果部分合并在一起。

缓冲示例

＆＃13;

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);
}

＆＃13;

<label>Select some large file: <input type=file></label>

＆＃13;

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

1 个答案:

缓冲示例