使用Reaction挂钩在Reaction js中预览上传的图像 [英] Preview of uploaded image in React js using React hooks
本文介绍了使用Reaction挂钩在Reaction js中预览上传的图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
通过选择文件输入上载图像后,如何使用React hooks
预览previewProfilePic > img
区域下的图像。
import React, { useState } from "react";
const Register = () => {
const [picture, setPicture] = useState(null);
const onChangePicture = e => {
console.log('picture: ', picture);
setPicture(e.target.files[0]);
};
return (
<div className="register_wrapper">
<div className="register_player_column_layout_one">
<div className="register_player_Twocolumn_layout_two">
<form className="myForm">
<div className="formInstructionsDiv formElement">
<h2 className="formTitle" >Sign Up</h2>
<p className="instructionsText"></p>
<div className="register_profile_image">
<input id="profilePic" type="file" onChange={onChangePicture}/>
</div>
<div className="previewProfilePic" >
<img className="playerProfilePic_home_tile" src=""></img>
</div>
</div>
<div className="fillContentDiv formElement">
<div className="names formContentElement">
<input className="inputRequest " type="text" placeholder="First Name" />
<input className="inputRequest " type="text" placeholder="Last Name" />
</div>
</div>
<div className="submitButtonDiv formElement">
<button className="submitButton">Register</button>
</div>
</form>
</div>
</div>
</div>
);
}
export default Register;
<div className="register_profile_image">
<input id="profilePic" type="file" onChange={onChangePicture}/>
</div>
推荐答案
若要查看预览,您需要读取图像并使用收到的base64格式数据设置状态,然后将其呈现为图像标记源。
要读取文件数据,可以使用FileReader
export default () => {
const [picture, setPicture] = useState(null);
const [imgData, setImgData] = useState(null);
const onChangePicture = e => {
if (e.target.files[0]) {
console.log("picture: ", e.target.files);
setPicture(e.target.files[0]);
const reader = new FileReader();
reader.addEventListener("load", () => {
setImgData(reader.result);
});
reader.readAsDataURL(e.target.files[0]);
}
};
return (
<div className="register_wrapper">
<div className="register_player_column_layout_one">
<div className="register_player_Twocolumn_layout_two">
<form className="myForm">
<div className="formInstructionsDiv formElement">
<h2 className="formTitle">Sign Up</h2>
<p className="instructionsText" />
<div className="register_profile_image">
<input id="profilePic" type="file" onChange={onChangePicture} />
</div>
<div className="previewProfilePic">
<img className="playerProfilePic_home_tile" src={imgData} />
</div>
</div>
<div className="fillContentDiv formElement">
<div className="names formContentElement">
<input
className="inputRequest "
type="text"
placeholder="First Name"
/>
<input
className="inputRequest "
type="text"
placeholder="Last Name"
/>
</div>
</div>
<div className="submitButtonDiv formElement">
<button className="submitButton">Register</button>
</div>
</form>
</div>
</div>
</div>
);
};
这篇关于使用Reaction挂钩在Reaction js中预览上传的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文