[JavaScript] 이미지업로드

⭐️ 이미지 업로드

  const [ImgBase64, setImgBase64] = useState(''); // 업로드 될 이미지
  const [imgFile, setImgFile] = useState(null); // 파일 전송을 위한 state
  
  const handleChangeFile = (event) => {
    let reader = new FileReader();

    reader.onloadend = (e) => {
      // 2. 읽기가 완료되면 아래 코드 실행
      const base64 = reader.result;
      if (base64) {
        // 파일 base64 상태 업데이트
        setImgBase64(base64.toString()); 
      }
    };
    if (event.target.files[0]) {
      // 1. 파일을 읽어 버퍼에 저장
      reader.readAsDataURL(event.target.files[0]); 
      // 파일 상태 업데이트
      setImgFile(event.target.files[0]); 
      console.log(imgFile);
    }
  };
  return (
    <Fragment>
      <form id='formEl'>
        <ImgUpload>
          //props로 전달받을 박스 크기와 이미지 크기
          <ImgPreview
            boxWidth={boxWidth}
            boxHeight={boxHeight}
            imgWidth={imgWidth}
            imgHeight={imgHeight}
          >
            {ImgBase64 ? (
              <img src={ImgBase64} />
            ) : (
              //이미지 업로드 되기 전 기본 이미지
              <BaseImg src='/public/Images/intern_seller_profile.jpeg' /> 
            )}
          </ImgPreview>
          <ImgAdd>
            <label htmlFor='imgFile'>이미지 선택</label>
            <input type='file' id='imgFile' onChange={handleChangeFile} />
          </ImgAdd>
        </ImgUpload>
      </form>
    </Fragment>
  );
}

FileReader

웹 애플리케이션이 비동기적으로 데이터를 읽기 위해 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해준다.

FileReader.onload

load 이벤트의 핸들러로 읽기 동작이 성공적으로 완료 되었을 때마다 발생한다.

FileReader.readAsDataURL()

컨텐츠를 특정 Blob 이나 File에서 읽어 오는 역할을 한다. read 행위가 종료되는 경우에, readyState 의 상태가 DONE이 되며, 이에 반응하여 loadend 이벤트가 실행된다. 또한 base64 인코딩 된 스트링 데이터가 result 속성(attribute)에 담아진다.

Base 64

8비트 이진 데이터(실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 말한다.