Reactjs 尝试在react中动态更改图像时图像不显示

我想改变图像动态，在静态图像工程罚款。在动态中，当我单击时，选择文件显示图像url，但不显示图像。这是我的代码

       {
      (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"/>

这是我的fileChange方法

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

---

提前感谢。

您必须为上载的文件创建URL

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

另一种选择是使用一些react库，这样您就不必执行所有这些操作

---

你能告诉我们你的

fileChange

方法吗。

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