TypeScript에서 FormData로 이미지 업로드하기

React+TypeScript로 프로젝트 개발 중 프로필 사진 변경 기능을 추가하기 위해 formData에 이미지를 추가해서 보내주려고 하는데 안되서 삽질 좀 했다.

 

😕 왜 안돼..?

const [image, setImage] = useState<FileList>();

const handleInfoSubmit = async (e: FormEvent) => {
  e.preventDefault();

  const formData = new FormData();
  formData.append('profilePicture', image);
  
  // ...
}

기존에 자바스크립트에서 formData를 보낼 때는 다른 것들과 마찬가지로 append를 해서 보내면 됐었는데 ts는 그렇게 하도록 두지 않았다. :(

오류 메시지

Argument of type 'FileList | undefined' is not assignable to parameter of type 'string | Blob'. Type 'undefined' is not assignable to type 'string | Blob'.ts(2345)

 

😚 해결 방법

const [image, setImage] = useState<FileList>();

const handleInfoSubmit = async (e: FormEvent) => {
  e.preventDefault();

  const formData = new FormData();
  if (image) Array.from(image).forEach((i) => formData.append('profilePicture', i));
  
  // ...
}

formData에 append하는 부분을 위와 같이 forEach로 돌면서 append하는 식으로 바꿔주면 formData에 이미지가 잘 들어가는 것을 확인할 수 있다.

 

if (image !== undefined) {
  try {
    const data = await axios.post(`${SERVER_URL}/${endpoint}`, formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    
    // setData
  }
  
  // ...
}

post해줄 때는 위와 같이 보내주면 된다.

 

 

혹시 Multipart: Boundary not found라는 오류가 발생할 경우 form태그에 encType='multipart/form-data' 를 추가해주면 된다.

<form className={styles.editForm} onSubmit={handleInfoSubmit} encType='multipart/form-data'>
</form>

 

---

참고

https://okky.kr/article/1076897

https://curryyou.tistory.com/466?category=898979