用Javascript讀取Synchronos文件

Question

我有以下文件選擇器對話框。我想允許選擇多個文件。選擇文件後，我想渲染選定文件的預覽。我的代碼是：

<input 
      type="file" 
      multiple 
      accept=".png, .jpeg" 

      onChange={e => { 
      this.setState({ previews: [] }); 

      if (!e.target.files) { 
       return; 
      } 

      var previews = []; 

      for (var i = 0; i < e.target.files.length; i++) { 
       var file = e.target.files[i]; 
       (function(file, previews) { 
       var reader = new FileReader(); 

       reader.onload = function(e) { 
        // console.log(e.target.result); 
        console.log("Just pushed a new preview"); 
        previews.push(e.target.result); 
       }; 
       reader.readAsDataURL(file); 
       })(file, previews); 
      } 

      console.log("All files read"); 
      // I want this to be called only after 
      // all the file contents are read 
      this.setState({ previews }); 
      }} 
     /> 

然而，與上面的代碼，All files read印在控制檯上後，我的Just pushed a new preview打印。

有沒有辦法讓FileReader循環（閉合）完成，然後調用this.setState({previews})？

所有這些代碼都在反應文件中，如果它很重要。

Answer 1

您需要將setState移到onLoad事件中。由於文件閱讀器是異步的，因此在onLoad外部設置狀態將在事件完成之前觸發它，並且會導致空的或不完整的previews陣列。

var previews = []; 
var s = this; 

for (var i = 0; i < e.target.files.length; i++) { 
    var file = e.target.files[i]; 
     var reader = new FileReader(); 

     reader.onload = function(e) { 
     previews.push(e.target.result); 
     s.setState({ previews }); 
     }; 

     reader.readAsDataURL(file); 
} 

Answer 2

使用Promise.all來等待所有承諾，以瞭解所有文件是否被處理。而且，您還需要在讀完文件後立即更新狀態。最好添加一個進度條和setState來更新它。

var Sample = React.createClass({ 
    getInitialState: function() { return { previews: [], allfilesdone:false }; }, 
    render: function() { 
    var p = this.state.previews.map((p) => <div>{p}</div>); 
    return (
     <div style = {this.styler}> 
     <input id="upload" multiple 
      accept=".txt" type="file" 
      onClick={(e) => this.setState({allfilesdone: false})} 
      onChange={(event)=> { 
       var s = this; 
       this.setState({previews:[], allfilesdone: false}); 
       var fs = event.target.files; 
       Promise.all([...fs].map((file) => { 
        var reader = new FileReader(); 
        return new Promise((resolve,reject) => { 
        reader.onload = (ev) => { 
         resolve(ev.target.result); 
         var pt = this.state.previews; 
         pt.push(ev.target.result); 
         s.setState({previews: pt}); 
        } 
        reader.readAsText(file); 
        }); 
       })) 
        .then(ft => { 
         this.setState({allfilesdone: true}); 
         }); 
      }}/> 
     <div>all processed: {this.state.allfilesdone?"true":"false"}</div> 
     <div>number of files: {this.state.previews.length}</div> 
     <div>{p}</div> 
     </div> 
    ); 
    } 
}); 

React.render(
    <Sample />, 
    document.getElementById('mount-point'));