反応中に画像を動的に変更しようとすると画像が表示されない

Question

画像を動的に変更したい、静止画像がうまく動いている。動的に私がをクリックするとファイルが表示されますが、表示されていない画像が表示されます。ここに私のコードがあります。

 { 
     (this.state.imageChange==true)?(
     <canvas id="Canvas" ref="myCanvas" width={300} height={300} /> 

    ):(
     <div style={{marginTop:15, marginBottom:15, marginLeft:15}}> 
     </div> 
    ) 
    } 
    <input type="file" id="fileupload" name="files[]" onChange={this.fileChange.bind(this)}/> 
    <input type="button" id="upload" value="Save"/> 

私はキャンバスのコンセプトを使用しました。ここで

const canvas =this.refs.myCanvas; 
const context = canvas.getContext('2d'); 
context.fillRect(0,0, 100, 100); 
var mapSprite = new Image(); 
mapSprite.src = this.state.pic; 

私fileChange方法は、事前に

fileChange(){ 
this.setState({imageChange:true}); 
var pic=document.getElementById("fileupload").files[0].name; 
this.setState({pic:pic},()=>{ 
    console.log("picture:"+this.state.pic); 
}); 
} 

おかげです。

Answer 1

アップロードしたファイルのURLを作成する必要があります。

function handleChange(files) { 
    const pic = URL.createObjectURL(files[0]); 
    console.log(pic); 
    this.setState({pic, imageChange: true}); 
} 

別の方法としては、これらすべての操作を行う必要はありませんいくつかはreact-dropzoneのようなライブラリを使用し反応です。