如何在reactJS中显示从输入类型=文件中选择的图像

我正在尝试在我的网络应用程序中显示从我的计算机中选择的图像。我提到了以下问题，它解决了我试图解决的问题。

如何在不向服务器发送数据的情况下显示选定的图像？ https://stackoverflow.com/questions/17138244/how-to-display-selected-image-without-sending-data-to-server

我的 html 部分是这样的

 <div className="add_grp_image_div margin_bottom">
      <img src={img_upload} className="add_grp_image"/>
      <input type="file" className="filetype" id="group_image"/>
      <span className="small_font to_middle">Add group image</span>
      <img id="target"/>
 </div>

我想在中显示所选图像

<img id="target"/>

我怎样才能做到这一点？

我提到FileReader文档也是如此。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader https://developer.mozilla.org/en-US/docs/Web/API/FileReader

挂钩版:

const [image, setImage] = useState(null)

const onImageChange = (event) => {
 if (event.target.files && event.target.files[0]) {
   setImage(URL.createObjectURL(event.target.files[0]));
 }
}

return (
  <div>
    <input type="file" onChange={onImageChange} className="filetype" />
    <img alt="preview image" src={image}/>
  </div>
)

班级版

render() {
   return (
     <div>
       <input type="file" onChange={onImageChange} className="filetype" />
       <img alt="preview image" src={this.state.image}/>
     <div/>
   )
}

onImageChange = (event) => {
 if (event.target.files && event.target.files[0]) {
   this.setState({image: URL.createObjectURL(event.target.files[0])});
 }
}

另一种解决方案是使用FileReader

onImageChange = (event) => {
  if (event.target.files && event.target.files[0]) {
    let reader = new FileReader();
    reader.onload = (e) => {
      setImage(e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);
  }
}

工作演示：https://codesandbox.io/s/priceless-cerf-my900b https://codesandbox.io/s/priceless-cerf-my900b