如何在reactJS中显示从输入类型=文件中选择的图像
Posted
技术标签:
【中文标题】如何在reactJS中显示从输入类型=文件中选择的图像【英文标题】:How to display a image selected from input type = file in reactJS 【发布时间】:2017-10-15 00:03:06 【问题描述】:我正在尝试在我的网络应用程序中显示从我的计算机中选择的图像。我提到了以下问题,该问题解决了我要解决的问题。
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
【问题讨论】:
【参考方案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/>
对于钩子版本:
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 src=image />
</div>
)
【讨论】:
我收到此错误。未捕获的类型错误:无法读取 null 的属性“图像” 谢谢。您的解决方案有帮助! 太好了。这对我帮助很大。只是表示感谢。【参考方案2】:希望对你有用
<form onSubmit=form => submitForm(form)>
<input
accept="image/*"
onChange=onImageChange
className=classes.inputImage
id="contained-button-file"
multiple
name="image"
type="file"
/>
<label htmlFor="contained-button-file">
<IconButton component="span">
<Avatar
src=mydata.imagePreview
style=
margin: "10px",
width: "200px",
height: "200px"
/>
</IconButton>
</label>
<Button
type="submit"
variant="outlined"
className=classes.button
>
Default
</Button>
</form>
onImageChange
const onImageChange = event =>
if (event.target.files && event.target.files[0])
let reader = new FileReader();
let file = event.target.files[0];
reader.onloadend = () =>
setData(
...mydata,
imagePreview: reader.result,
file: file
);
;
reader.readAsDataURL(file);
;
提交表格
const submitForm = form =>
form.preventDefault();
const formData = new FormData();
formData.append("image", mydata.file);
// for (var pair of formData.entries())
// console.log(pair[1]);
//
const config =
headers:
"content-type": "multipart/form-data"
;
axios
.post("api/profile/upload", formData, config)
.then(response =>
alert("The file is successfully uploaded");
)
.catch(error => );
;
【讨论】:
【参考方案3】:最近我发现需要一个类似的功能。这是我使用hooks
的实现。
export default function App()
const [image, setImage] = React.useState("");
const imageRef = React.useRef(null);
function useDisplayImage()
const [result, setResult] = React.useState("");
function uploader(e)
const imageFile = e.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", (e) =>
setResult(e.target.result);
);
reader.readAsDataURL(imageFile);
return result, uploader ;
const result, uploader = useDisplayImage();
return (
<div className="App">
<input
type="file"
onChange=(e) =>
setImage(e.target.files[0]);
uploader(e);
/>
result && <img ref=imageRef src=result />
</div>
);
我创建了一个自定义hook
,以便可以在应用程序的任何地方重复使用它。 hook
返回图像 src
和 uploader
function
。
然后可以将图像src
链接到<img src=.. />
,然后在input
更改上,您只需将e
传递给uploader
function
。
【讨论】:
以上是关于如何在reactJS中显示从输入类型=文件中选择的图像的主要内容,如果未能解决你的问题,请参考以下文章