如何在reactJS中显示从输入类型=文件中选择的图像 [英] How to display a image selected from input type = file in reactJS
本文介绍了如何在reactJS中显示从输入类型=文件中选择的图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在Web应用程序中显示从计算机中选择的图像.我提到了以下问题,该问题解决了我要解决的问题.
I'm trying to display a image selected from my computer in my web app. I referred the following question which addresses the question i'm trying to fix.
我有这样的html部分
I have my html part like this
<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>
我要在其中显示所选图像
I want to display the selected image in
<img id="target"/>
我该怎么做?
我也提到了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
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}/>
这篇关于如何在reactJS中显示从输入类型=文件中选择的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文