javascript - FileReader.onprogress block 大小

Question

您的浏览器如何决定触发 FileReader.onprogress 事件的频率？我在这个事件中做了一些处理，我认为它比我想要的更频繁地触发。我想要更大的 block 。有没有办法告诉它少开火？

示例代码:

_.each(dropEvent.originalEvent.dataTransfer.files, function(file) {
    var reader = new FileReader();
    var pos = 0;
    var startTime = +new Date();
    var xxh = XXH();

    reader.onprogress = function(progress) {
        var length = progress.loaded - pos;
        var arr = new Uint8Array(reader.result, pos, length);
        pos += length;

        xxh.update(arr);

        if (progress.lengthComputable) {
            console.log('hashing', (progress.loaded / progress.total * 100).toFixed(1) + '%');
        }
    };

    reader.onload = function() {
        var arr = new Uint8Array(reader.result, pos);
        xxh.update(arr);
        var hash = xxh.digest().toNumber();

        var elapsed = +new Date() - startTime;
        console.info("computed hash", xxh.digest().toNumber(), 'for file', file.name, 'in', elapsed, 'ms');
    };

    reader.readAsArrayBuffer(file);
});

Answer 1

我在调查另一个问题时碰巧遇到了这个老问题。
您可能不再需要解决方案，但这可能会对 future 的访问者有所帮助。

您应该将文件分割成更小的 Blob，这样您就可以指定您想要的确切大小。

function hashFile(file, chunkSize, callback) {
  var hash = XXH();
  var size = file.size;
  var offset = 0;
  var chunk = file.slice(offset, offset + chunkSize);

  var hashChunk = function() {
    var reader = new FileReader();
    reader.onload = function(e) {
      // Increment hash
      hash.update(e.target.result);

      // Update offset for next chunk
      offset += chunkSize;

      // Hash next chunk if available
      if(offset < size) {
        // Splice the next Blob from the File
        chunk = file.slice(offset, offset + chunkSize);
        // Recurse to hash next chunk
        hashChunk();
      // Done hashing
      } else {
        // Report digest
        callback.call(file, hash.digest().toString(16));
      }
    };

    reader.readAsArrayBuffer(chunk);
  };

  // Start hashing chunks
  hashChunk();
}

演示:http://jsbin.com/nococoqa/5/edit?js,console,output