이미지업로드1_1.md

안녕하세요 ! 오늘은 이미지를 웹사이트에 업로드해볼 건데요. 기능은 두가지를 구현해볼 겁니다.

1. 이미지를 웹사이트에 올려 미리보기
2. 이미지를 백엔드 서버에 전송하기

1. 이미지를 웹사이트에 올려 미리보기

1-1. input과 label 세팅

우선, input과 label을 세팅해봅시다. input에 type="file"을 그냥 사용하면 위처럼 못생긴 '파일 선택'화면이 나타나게 됩니다. 이런 못생긴 화면을 감추기 위해 input요소는 display:none;을 통해 감추고 label요소만 보이게 할 것입니다,

<S.ModalSelectInput
	id="pick_in_gallery"
	type="file"
	accept="image/*"
	onChange={onUploadImage}
/>
<S.ModalSelectLabel htmlFor="pick_in_gallery">갤러리에서 사진 선택</S.ModalSelectLabel>

위의 코드는 styled-components를 이용한 코드입니다. 그래서 태그 이름이 S.~으로 시작하는 것입니다.

label을 클릭하면 input이 실행되도록 하기 위해 input요소의 id와 label의 htmlFor을 동일시 합니다. 그리고 input의 type="file", accept="image/*"을 통해 파일 중 이미지 파일만 입력받도록 합니다. label을 클릭하면 input이 실행되도록 하기 위해 input요소의 id와 label의 htmlFor을 동일시 합니다. 그리고 input의 type="file", accept="image/*"을 통해 파일 중 이미지 파일만 입력받도록 합니다.

label을 원하는 대로 꾸몄다면, 이제 세팅은 끝났습니다. JS를 이용하여 파일을 업로드하면 됩니다. input의 onChange속성으로 onUploadImage함수를 전달하였습니다.

1-2. onChange 함수 전달하기

FileReader

저희가 사용할 것은 FileReader객체입니다. FileReader객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.(참고)

FileReader 속성

1. FileReader.error ; 파일을 읽는 도중에 발생한 오류 나타냄
2. FileReader.readyState ; FileReader의 상태를 나타내는 숫자 0 ; 아직 데이터 로드되지 않음 1 ; 데이터 로딩 중 2 ; 데이터 로드 완료
3. FileReader.reulst ; 파일의 컨텐츠. 파일 읽기에 성공하면 여기에 저장됨

FileReader 이벤트 핸들러

1. FileReader.onAbort ; 읽기 동작이 중단될 때마다 발생
2. FileReader.onerror ; 읽기 동작에 에러가 생길 때마다 발생
3. FileReader.onload ; 읽기 동작이 성공적으로 완료될 때마다 발생. 비동기이므로 원하는 동작을 위해 Callback함수 혹은 async-await를 이용하는 것이 좋습니다.

const onUploadImage = useCallback(async (e) => {
  if (!e.target.files) {
    return;
  }
  const reader = new FileReader();
  reader.onload = () => {
    const dataURL = reader.result;
    localStorage.setItem("profileImgData", dataURL);
  };
}, []);

FileReader객체를 생성해줍니다. 그리고 FileReader.onLoad메서드를 이용하여 dataURL을 얻어옵니다. 그리고 localStorage에 저장해주었습니다. 이 dataURL을 <img />의 src속성에 넘겨주면 이미지를 미리보여줍니다.