자바 스크립트에서 읽은 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

onLoad 이벤트 내에서 setState를 이동해야합니다. 파일 판독기가 비동기 적이기 때문에 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'));