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

小编典典

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

reactjs

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

我有这样的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/zh-
CN/docs/Web/API/FileReader

阅读 288

2020-07-22

共1个答案

小编典典

试试这个

<input type="file" onChange={this.onImageChange} className="filetype" id="group_image"/>

向类添加方法

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

或者你可以使用 URL.createObjectURL

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

并显示图片

<img id="target" src={this.state.image}/>

2020-07-22