업로드 사진 링크 기능 구현하기

9739 단어 React자바스크립트React

구현 목적

기존에 사진을 담고 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를 변경시킨다.
JPA :: 준영속 엔티티 적용법
java는 텍스트 상자와 텍스트 영역의 입력과 출력을 실현합니다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage