사용 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>
);
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다