FileReader readAsArrayBuffer in IE11 not working for large files

问题

I have used filereader object to convert file to arraybuffer. In IE11 it is working fine for max 20mb files. but not working for 200mb file and it results null instead array buffer value. Below mentioned my code

      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
      }

Valuable response to be appreciated.

回答1:

You can get around the limitation using the file object's slice method.

Slice the file into smaller parts directly from the file blob, then read each slice using FileReader. This way you can get around the limit. You can merge each resulting part back together using Blob([part1, part2, ...], {}).

Buffering Example

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

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

来源：https://stackoverflow.com/questions/48382934/filereader-readasarraybuffer-in-ie11-not-working-for-large-files

标签

javascript

arraybuffer