Javascript、スプライスされたFileReaderを使用して、大きなファイルを約束してください。

Question

私はFileReaderを使用して、いくつかのファイルを順番に読むことを約束しています。問題は、読取り操作を複数のチャンクで分割して、それらを実行可能にする必要があることです。そうすることで、私はPromiseチェーンを失います。これは、コンソールログhere、次にcatched（私がチェーンを失ったことを意味する）を取得し、次にinside、次にfinishedというコードで発生します。どういうわけかアップロードの約束は尊重されません。ここで

は、それがコードである

var reader = new FileReader(); 
reader.onloadend = function(e) { 
    if (e.target.readyState == 2) { 
    console.log('inside') 
    start = temp_end; 
    temp_end = start + BYTES_PER_CHUNK; 
    if (temp_end > end) temp_end = end; 
    upload(); 
    } 
}; 

Array.reduce(function(promise, item) { 
    start = 0; 
    temp_end = start + BYTES_PER_CHUNK; 
    end = parseInt(totalsize); 
    if (temp_end > end) temp_end = end; 
    uploading_file = item; 
    return upload() 
    .then(function(){ 
    console.log('not shown'); 
    }) 
    .catch(console.log('catched')); 
},0); 

function upload() { 
    return new Promise(function(resolve,reject) { 
    if (start < end) { 
     console.log('here') 
     var chunk = uploading_file.slice(start, temp_end); 
     reader.readAsBinaryString(chunk); 
    } else { 
     console.log('finished') 
     uploading_file = null; 
     resolve(); 
    } 
    } 
} 

EDIT1（最後のEDITに行ってください、私はそれにもかかわらず、元のテキストを保つ）：私はしようとしている新しいコード、まだにconsole.log stop 1はuploadの前に表示されますそしてhere 2

 var start = 0; 
     var temp_end = start + BYTES_PER_CHUNK; 
     var end = parseInt(item.size); 
     if (temp_end > end) temp_end = end; 
     uploading_file = item; 
     console.log('here 1') 
     Promise.resolve().then(function() { 
      return upload(); 
     }) 
     .then(function(){ 
      console.log('here 2') 
     }) 
     .catch(console.log('stop 1')); 

     function upload() { 
      console.log('upload') 
      if (start < end) { 
       var chunk = uploading_file.slice(start, temp_end); 
       var reader = new FileReader(); 
       reader.readAsArrayBuffer(chunk); 
       reader.onload = function(e) { 
        if (e.target.readyState == 2) { 
         start = temp_end; 
         temp_end = start + BYTES_PER_CHUNK; 
         if (temp_end > end) temp_end = end; 
         return upload(); 
        } 
       } 
      } else { 
       console.log('finished') 
       uploading_file = null; 
       return Promise.resolve(); 
      } 
     } 

EDIT2：キャッチログが原因の機能の欠如（）にありました。次のコードはうまくいくようですが、私は最後に興味がある値contentを見ることができません。

 var item; // item is a file 
     var BYTES_PER_CHUNK = 100000; 
     var start = 0; 
     var temp_end = start + BYTES_PER_CHUNK; 
     var end = parseInt(item.size); 
     if (temp_end > end) temp_end = end; 
     var content = ''; // to be filled by the content of the file 
     var uploading_file = item; 
console.log('here 1'); 
     Promise.resolve().then(function() { 
console.log('here 2'); 
      return upload(); 
     }) 
     .then(function(content){ 
console.log('here 4'); 
      console.log(content); // this is empty (!!) 
     }) 
     .catch(function(){ 
      console.log('stop 1') 
     }); 

     function upload() { 
      if (start < end) { 
       var chunk = uploading_file.slice(start, temp_end); 
       var reader = new FileReader(); 
       reader.readAsArrayBuffer(chunk); 
       reader.onload = function(e) { 
        if (e.target.readyState == 2) { 
         content += new TextDecoder("utf-8").decode(e.target.result); 
         start = temp_end; 
         temp_end = start + BYTES_PER_CHUNK; 
         if (temp_end > end) temp_end = end; 
         return upload(); 
        } 
       } 
      } else { 
       uploading_file = null; 
       console.log(content); // it shows the content of the file 
console.log('here 3'); 
       return Promise.resolve(content); 
      } 
     } 

Answer 1

あなたupload()機能は常に約束を返しません：

問題は、約束は確かにここで働いていないということです、にconsole.logはコードが

here 1 
here 2 
here 4 
here 3 

言います。 elseの条件で行いますが、if条件はありません。あなたは返信陳述書を持っていますが、コールバックの内部にあるので、それはuploadの呼び出し元によって受信されません。

これにそれを変更してみてください：

function upload() { 
    if (start < end) { 
    return new Promise(function (resolve, reject) { 
     var chunk = uploading_file.slice(start, temp_end); 
     var reader = new FileReader(); 
     reader.readAsArrayBuffer(chunk); 
     reader.onload = function(e) { 
     if (e.target.readyState == 2) { 
      content += new TextDecoder("utf-8").decode(e.target.result); 
      start = temp_end; 
      temp_end = start + BYTES_PER_CHUNK; 
      if (temp_end > end) temp_end = end; 
      resolve(upload()); 
     } 
     } 
    }); 
    } else { 
    uploading_file = null; 
    console.log(content); // it shows the content of the file 
    return Promise.resolve(content); 
    } 
} 

さて、upload代わりに、常にundefinedの約束を返します。