[React] FormData로 image와 json 파일을 저장하여 axios 요청을 보냈지만 안되는 문제

프로젝트 중 회원가입 로직을 짜다가 한가지 문제가 발생했다.

FormData 객체를 통해 유저의 프로필 이미지와 유저의 정보를 저장하여 백엔드로 보내야 한다. 

프로필 이미지는 multipart/form-data, 유저 정보는 application/json 형식으로 보내려고 이렇게 작성했다.

const formData = new FormData();

userData = {
...
};

formData.append('img', img);
formData.append('userData', new Blob([JSON.stringify(data)], {type: 'application/json'}));

SignUp.mutate(formData);

이미지는 File로 저장되고, 유저의 정보는 json을 Blob 객체로 바꾸어 FormData에 저장하여 post 요청을 보냈지만 axios 에러가 떴다.

 

검색해보니 FormData에 여러개의 파일을 저장하려면 동일한 key 값을 갖거나 배열 형태로 저장하면 된다고 한다.

 

하지만 나는 두 파일들을 각각 다른 key 값을 갖게하고 싶었다.

//FormData

img: File{~~~},
userData: Blob{~~~},

 

 

다른 해결책은 userData를 string으로 변환하여 보내는 것이다.

백엔드에서는 Blob 객체로 받는게 편하다고 해서 열심히 구글링을 해봤지만 저런 상황에서는 JSON.stringify를 써서 보내고 백엔드 단에서 다시 변환한다고 한다.

 

결국 이런 방식으로 변경하게 되었다.

const formData = new FormData();

userData = {
...
};

formData.append('img', img);
formData.append('userData', JSON.stringify(userData));

SignUp.mutate(formData);

 

 

 

참고

https://stackoverflow.com/questions/54269650/why-formdata-does-not-work-with-multiple-files

Why formData does not work with multiple files?

https://developer0809.tistory.com/135

[#. React] React에서 file, json data를 같이 formData에 넣어서 REST API에 post 하기