[TIL] 이미지 업로드 구현

동화·2023년 4월 11일
0

TIL

목록 보기
20/21
post-thumbnail

업그레이드된 작업을 위해
이미지 업로드를 미리보기 / 삭제까지 구현하는 방법을 알아보도록 한다!
이 모든 것은 나의 빌드업이 될 것이야... 🙄

구현하기

  • 파일을 업로드할 input 버튼 / 올린 파일의 이미지 미리보기

  • FileReader를 선언하여 업로드한 파일 객체를 변수에 담음.

  • console.log(e.target.files);를 하게 되면,

    위 사진과 같이 객체로 담긴다(참고 : FileList)

  • 그러면 e.target.files[0]으로 원하는 파일을 가져올 수가 있다.

  • 그 파일은 readAsDataURL로 파일의 url을 읽어온다.

  • 업로드가 되면 imgSrc에 파일의 컨텐츠가 저장이 되고, 그 imgSrc를 이미지태그에 넘겨주어 이미지 경로를 가져올 수 있도록 해준다.

const [imgSrc, setImgSrc] = useState(null);

  const onUpload = (e) => {
    const file = e.target.files[0];
    console.log(e.target.files);
    const reader = new FileReader();
    reader.readAsDataURL(file);

    return new Promise((resolve) => {
      reader.onload = () => {
        setImgSrc(reader.result);
        resolve();
      };
    });
  };

...

return (
  	<input
  		accept="image/*"
  		multiple type={"file"}
		onChange={(e) => onUpload(e)}
	/>	
	<img
		width={"300px"}
		src={imgSrc}
		alt=" "
	/>
)



사진이 없을 때 뷰

  • public 폴더에 빈 사진을 넣고(blank.png) 삼항연산자를 이용한다.
<img src={imgSrc ? imgSrc : process.env.PUBLIC_URL + "blank.png"}/>



업로드한 사진 삭제

  • 버튼을 하나 만들어 버튼을 누르면 삭제가 되도록 한다.
  const onDelete = (e) => {
    setImgSrc(null);
  };


<button onClick={onDelete}>삭제하기</button>

근데 이렇게 했더니 삭제시에 이름이 같이 지워지지가 않았따 ㅠㅠ
그래서 useRef 를 사용해주었음!!!

  const fileInput = useRef();


  const onDelete = (e) => {
    setImgSrc(null);
    fileInput.current.value = "";
  };

...

	<input
          accept="image/*"
          multiple
          type={"file"}
          ref={fileInput}
          onChange={(e) => onUpload(e)}
    />

useRef 를 이용해 해당 value로 이동해 바로 빈값으로 만들어주었더니,
삭제했을 때 바로 이름까지 지워졌다

7개의 댓글

comment-user-thumbnail
2023년 4월 11일

동화님이 로그인 부분 했으면 더 완성도 있었겠네욥...

1개의 답글
comment-user-thumbnail
2023년 4월 11일

FileReader가 저런 용도로 사용하는 거군요
글이 깔끔하게 쓰셔가지고 읽기 좋았습니다.

답글 달기
comment-user-thumbnail
2023년 4월 16일

예전에 사용해봤다가 까먹었었는데.. 정리가 너무 깔끔해요!! 다음에 또 참고할 때 읽어야겠습니다ㅎㅎ

답글 달기
comment-user-thumbnail
2023년 4월 16일

저는 new FormData() 사용해서 만들었는데, fileReader도 해봐야겠네욤 !

답글 달기
comment-user-thumbnail
2023년 4월 17일

useRef로 삭제하는 방법! 잘 써먹겠습니다!

답글 달기
comment-user-thumbnail
2023년 4월 19일

잘봤씁니당 formData에 바로 담는 방식도 있더라구요? 나중에 한번 시도해보세요!

답글 달기