我正在尝试在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文档。
FileReader
https://developer.mozilla.org/zh- CN/docs/Web/API/FileReader
试试这个
<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
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}/>