React | Formdata로 이미지, 텍스트 파일 전송하기

이번 프로젝트에서는 이전에 해보지 못한 이미지파일을 POST하는 기능을 구현하게 되었다. 유저 로컬로부터 업로드된 파일을 백엔드로 전송해야하는데 기존엔

'content-type': 'application/json;charset=UTF-8',

으로 지정했던 것과는 달리

'Content-Type': `multipart/form-data`,

이렇게 설정해줘야하였다.

axios인스턴스 디폴트값을 json형태로 지정해줬던터라 새로운 인스턴스를 만들어야하나 생각하였지만 커스텀 인스턴스를 덮어씌우는 방식으로 해결할 수 있었다.

//Requests.js
export const instance = axios.create({
  baseURL: `서버주소`,
  headers: {
    'content-type': 'application/json;charset=UTF-8',
    accept: 'application/json,',
  },
});

const instances = {
 createMeeting: (data) =>
    instance.post(`meeting`, data, {
      headers: {
        'Content-Type': `multipart/form-data`,
      },
    }),
    }

모임 생성 컴포넌트로 돌아가 FormData에 이미지파일과 텍스트파일을 담고 서버로 전송해보자.

 //CreateMeeting.jsx
 
 let formData = new FormData();
 formData.append('image', image);
 formData.append('data', new Blob([JSON.stringify(data)], { type: 'application/json' }));
 
 instances
        .createMeeting(formData)
        .then((res) => console.log(res))
        .catch((err) => console.log(err));