React input으로 이미지 업로드/미리보기

글을 작성하는 화면에서, 이미지를 업로드하고 미리보기 화면을 보여주는 방법을 알아봤다.

 

// state 값으로 이미지 값 받을 준비
const [imgSrc, setImgSrc] = useState('');

// 미리보기 로직 - input의 onChange에 넣어줄 함수
const fileChange = (fileBlob)=>{
        const reader = new FileReader(); // file, Blob 객체를 핸들링하는데 사용
        								// File, Blob 객체를 사용해 특정 파일을 읽어들여
                                        // js에서 파일에 접근할 수 있게 도와줌
              reader.readAsDataURL(fileBlob); // File 혹은 Blob 을 읽은 뒤 base64로 인코딩한 문자열을
                                              //FileReader 인스턴스의 result라는 속성에 담아줌
              return new Promise((resolve) => {
                reader.onload = () => {       // FileReader가 성공적으로 파일을 읽어들였을 때 트리거 되는 이벤트 핸들러
                                              // 이 내부에 우리가 원하는 로직을 넣어주면 됨
                                              // 이번과 같은 경우는 setState로 img값 받기
                    setImgSrc(reader.result);
                    resolve();
                };
              });
    }

 

<label htmlFor="inputFile">사진 추가 +</label>
    <input  
        id="inputFile" 
        type="file" 
        name="file" 
        accept='image/*'  // input을 이미지를 받는 버튼으로 변경(type="file")
        style={{"display":"none"}} // 기본 이미지는 못생겼으니 숨기고 label로 style 주기
        onChange={(e)=>{fileChange(e.target.files[0])}}/> // 상태가 바뀐 input의 files[0]은
        												//fileChange 함수에 의해 처리됨
    <img src={imgSrc}/> // 이제 귀여운 고양이 사진이 들어올 차례

 

미리보기 이미지가 잘 들어온다.

 

 

 

---

참조

https://nukw0n-dev.tistory.com/30