Base64를 사용해서 이미지를 전달해보자 (1) - 이미지 저장 (Encoding)

1. input tag에 type을 file로 해주면 파일을 업로드할 수 있고, accept 속성을 사용해서 업로드 될 파일의 타입을 정해줄 수 있다.

<input name="sample" type="file" accept="image/*" />

2. 파일을 선택하면 해당 파일을 Base64 인코딩 하고 인코딩 결과를 state에 저장하는 encodeFilteToBase64 함수를 만들어 input 태그에 붙인다.

const [imageSrc, setImageSrc] = useState("");

const encodeFileToBase64 = (fileBlob: any) => {
  if (fileBlob) {
    const reader = new FileReader();
    reader.readAsDataURL(fileBlob);
    reader.onload = (event: any) => {
      setImageSrc(reader.result + "");
    };
  } else {
    setImageSrc("");
  }
};

<input name="sample" type="file" accept="image/*"
  onChange={(e: any)=>{encodeFileToBase64(e.target.files[0]);}} />

3. 클릭하면 서버로 requestBody를 전송하는 onClickSave 함수를 만들어 button 태그에 붙인다.

 const onClickSave = async () => {
    if (imageSrc.length > 0) {
      try {
        let param = { 
          image: imageSrc
            .replace("data:image/png;base64,", "")
            .replace("data:image/jpeg;base64,", "")
            .replace("data:image/jpg;base64,", ""),
        };

        let res = await axios.post('서버주소', param);
        alert("전송 성공");
      } catch(err) {
        alert("전송 실패");
        console.err(err);
      }  
        
    } else {
      alert("Please select a image.");
    }
  };

<button onClick={onClickSave}>하하</button>