javascript FileReader - analisi di file lunghi in blocchi

Question

Ho un file lungo che devo analizzare. Perché è molto lungo ho bisogno di farlo pezzo di blocco. Ho provato questo:

function parseFile(file){ 
    var chunkSize = 2000; 
    var fileSize = (file.size - 1); 

    var foo = function(e){ 
     console.log(e.target.result); 
    }; 

    for(var i =0; i < fileSize; i += chunkSize) 
    { 
     (function(fil, start) { 
      var reader = new FileReader(); 
      var blob = fil.slice(start, chunkSize + 1); 
      reader.onload = foo; 
      reader.readAsText(blob); 
     })(file, i); 
    } 
} 

Dopo averlo eseguito, vedo solo il primo blocco nella console. Se cambio 'console.log' in jquery append ad alcuni div, vedo solo il primo pezzo in quel div. Che ne dici di altri pezzi? Come farlo funzionare?

Answer 1

Il secondo argomento di slice è in realtà il byte finale. Il codice dovrebbe essere simile:

function parseFile(file){ 
    var chunkSize = 2000; 
    var fileSize = (file.size - 1); 

    var foo = function(e){ 
     console.log(e.target.result); 
    }; 

    for(var i =0; i < fileSize; i += chunkSize) { 
     (function(fil, start) { 
      var reader = new FileReader(); 
      var blob = fil.slice(start, chunkSize + start); 
      reader.onload = foo; 
      reader.readAsText(blob); 
     })(file, i); 
    } 
} 

In alternativa è possibile utilizzare questo BlobReader per una più facile interfaccia:

BlobReader(blob) 
.readText(function (text) { 
    console.log('The text in the blob is', text); 
}); 

Maggiori informazioni:

• README.md
• Docs

Answer 2

FileReader API è asincrono quindi è necessario gestirlo con le chiamate block. A for loop non farebbe il trucco dato che non aspetterebbe che ogni lettura fosse completata prima di leggere il prossimo blocco. Ecco un approccio di lavoro.

function parseFile(file, callback) { 
    var fileSize = file.size; 
    var chunkSize = 64 * 1024; // bytes 
    var offset  = 0; 
    var self  = this; // we need a reference to the current object 
    var chunkReaderBlock = null; 

    var readEventHandler = function(evt) { 
     if (evt.target.error == null) { 
      offset += evt.target.result.length; 
      callback(evt.target.result); // callback for handling read chunk 
     } else { 
      console.log("Read error: " + evt.target.error); 
      return; 
     } 
     if (offset >= fileSize) { 
      console.log("Done reading file"); 
      return; 
     } 

     // of to the next chunk 
     chunkReaderBlock(offset, chunkSize, file); 
    } 

    chunkReaderBlock = function(_offset, length, _file) { 
     var r = new FileReader(); 
     var blob = _file.slice(_offset, length + _offset); 
     r.onload = readEventHandler; 
     r.readAsText(blob); 
    } 

    // now let's start the read with the first block 
    chunkReaderBlock(offset, chunkSize, file); 
} 

Answer 3

mi si avvicinò con un'idea molto interessante che è probabilmente molto veloce dato che convertirà il blob ad un ReadableByteStreamReader probabilmente molto più facile anche dal momento che non è necessario per gestire cose come dimensione del blocco e offset e poi fare tutto ricorsivo in un ciclo - ma funziona solo per Blink, Edge lo otterrà nella prossima versione

let pump = reader => reader.read() 
.then(({ value, done }) => { 
    if(done) return 
    console.log(value) // uint8array chunk 
    return pump(reader); 
}) 


window.blobToStream = blob => 
    fetch(URL.createObjectURL(blob)) 
    .then(res => pump(res.body.getReader()))