구현 목적
기존에 사진을 담고 API로 보낼때
해당 로컬에서 추가한 사진이 미리 보이게 만들고 싶었다.
다른 사람의 코드
아래 코드는 해당 링크의 코드를 통해 사용했다.
<!DOCTYPE html>
<html>
<body>
<input type="file" id="image" accept="image/*" onchange="setThumbnail(event);"/>
<div id="image_container"></div>
<script>
function setThumbnail(event) { var reader = new FileReader();
reader.onload = function(e) { var img = document.createElement("img"); img.setAttribute("src", e.target.result);
document.querySelector("div#image_container").appendChild(img); }; reader.readAsDataURL(event.target.files[0]); } </script>
</body>
</html>React에 적용시키기
...
const onImgChange = (e) => {
e.preventDefault()
let reader = new FileReader()
reader.onload = function (event) {
setimageGetProps(event.target.result)
}
reader.readAsDataURL(e.target.files[0])
setImageUpload(e.target.files[0])
}
...
return
<Image
src={
imageGetProps
? imageGetProps
: 'https://via.placeholder.com/300.png'
}
></Image>
<input
type="file"
className="imgInput"
accept="image/*"
name="file"
onChange={onImgChange}
></input>위쪽의 setThumbnail 부분이
onImgChange와 같은 부분을 담당한다.
reader.readAsDataURL(e.target.files[0])를 통해 받아온 이미지를 Data를 지닌 url로 만들고- onload가 실행되면서 해당 매개변수로 받은 event를
setimageGetProps라는 useState의 setState와 같이 처리해주어
image를 변경시킨다.
나의 하루를 가능한 기억하고 즐기고 후회하지말자