アップロードする前に画像をプレビューして

Question

ここには多くの例がありますが、反応が見つからないようです。私はバニラjsを反応させることに成功したが、an errorを得た。

答えは十分に単純に見えるので、ここで私が反応で行く：

getInitialState: function(){ 
    return{file: []} 
}, 

_onChange: function(){ 
    // Assuming only image 
    var file = this.refs.file.files[0]; 
    var reader = new FileReader(); 
    var url = reader.readAsDataURL(file); 
    console.log(url) // Would see a path? 
    // TODO: concat files for setState 
}, 

render: function(){ 
return(
    <div> 
    <form> 
     <input 
     ref="file" 
     type="file" 
     name="user[image]" 
     multiple="true" 
     onChange={this._onChange}/> 
    </form> 
    {/* Only show first image, for now. */} 
    <img src={this.state.file[0} /> 
    </div> 
) 
}; 

基本的に私が見てきたすべての答えは、私が持っているもののようなものを示しています。 Reactアプリの違いは？その答えについて

：

Answer 1

は違い、loadイベントが終了したときにちょうどあなたの画像を読み取ります。 load endイベントハンドラでは、あなたの状態を示すだけです：

getInitialState: function(){ 
    return{file: []} 
} 

_onChange: function(){ 
    // Assuming only image 
    var file = this.refs.file.files[0]; 
    var reader = new FileReader(); 
    var url = reader.readAsDataURL(file); 

    reader.onloadend = function (e) { 
     this.setState({ 
      imgSrc: [reader.result]; 
     }) 
    }.bind(this); 
    console.log(url) // Would see a path? 
    // TODO: concat files 
}, 

render: function(){ 
return(
    <div> 
    <form> 
     <input 
     ref="file" 
     type="file" 
     name="user[image]" 
     multiple="true" 
     onChange={this_onChange}/> 
    </form> 
    {/* Only show first image, for now. */} 
    <img src={this.state.imgSrc} /> 
    </div> 
) 
}