Question

我使用HTML5 FileReader readAsArrayBuffer()方法将文件读入内存。根据规范（上面链接）：

在处理读取时，当blob中的数据变为可用时， 用户代理应将任务排队以使用部分Blob更新结果数据作为包含读取字节的ArrayBuffer [TypedArrays]对象直到阅读完成，伴随着取得进展事件即可。获取时，result属性返回部分Blob数据表示当前加载的字节数（作为。的一小部分总计）[ProgressEvents]，作为ArrayBuffer [TypedArrays]对象; 用户代理必须至少返回一个这样的ArrayBuffer [TypedArrays] 在处理这种读取方法时。最后返回的值是完成阅读。

但是，在我测试的浏览器（Firefox，Chrome和Opera）中，reader.result属性似乎不会一直更新。例如：

var reader = new FileReader(), pos = 0;

reader.addEventListener("progress", function(event){
    console.log(reader.result);
    var content = new Uint8Array(reader.result, pos, event.loaded);
    pos = event.loaded;

    // do stuff with the content down here
});

document.getElementById("fileInput").addEventListener("change", function(event){
    reader.readAsArrayBuffer(event.target.files[0]);
});

其中有一个ID为fileInput且类型为file的HTMLInputElement。选择足够大的文件并运行回调时，控制台上会发生以下情况（此示例来自Chrome）：

null
Uncaught TypeError: Type error

我认为TypeError出现是因为数组视图Uint8Array无法从ArrayBuffer中读取块，因为ArrayBuffer为null。

奇怪的是，如果文件很大但不是太大，一些进展事件实际上会成功运行。

如何可靠地实现FileReader的ArrayBuffer，以便为“progress”事件提供所需的数据？

Answer 1

我想你可以在加载文件后读取ArrayBuffer。以下功能也可以处理大文件。希望它有所帮助，

function onfilechange(evt) {
var reader = new FileReader(); 
reader.onload = function(evt) {
  var chars  = new Uint8Array(evt.target.result);
  var CHUNK_SIZE = 0x8000; 
  var index = 0;
  var length = chars.length;
  var result = '';
  var slice;
  while (index < length) {
    slice = chars.subarray(index, Math.min(index + CHUNK_SIZE, length)); 
    result += String.fromCharCode.apply(null, slice);
    index += CHUNK_SIZE;
  }
  // Here you have file content as Binary String in result var
};
reader.readAsArrayBuffer(evt.target.files[0]);
}

从FileReader的ArrayBuffer中提取部分数据

1 个答案: