[JS] formData에 파일, 객체 함께 넣기

게시글 등록 시 썸네일 이미지와 내용을 함께 전송해야 했다. formData 사용에 있어 크게 어려운 부분은 없었지만, 앞으로 사용할 일이 많을 것 같아서 잊지 않기 위해 정리해보려 한다.

formData는 XMLHttpRequest 전송을 위하여 설계된 key, value 형식의 특수한 객체다. 이 특수한 객체인 formData에 객체 형태의 데이터를 추가하기 위해서는 다음과 같은 과정을 거쳐야 한다.

1. 객체를 JSON으로 변환
2. 파라미터로 JSON으로 변환한 객체와 JSON 타입이라는 것을 명시한 config를 넣어 Blob 객체 생성

formData에 객체를 추가할 때 JSON으로 변환한 후 Blob 객체를 생성하여 넣어주는 것과, axios의 config에 Content-Type을 multipart/form-data로 지정해주는 것이 관건이다.

📌 파일, 객체 함께 추가

1. formData 객체 생성

const formData = new FormData();

2. formData에 file 추가

formData.append('file', file);

3. Blob 객체 생성 후 formData에 추가

객체를 JSON으로 변환하고, type을 JSON으로 지정하여 Blob 객체를 생성한 후 formData에 추가

const blob = new Blob([JSON.stringify(dataObj)], {
  type: 'application/json',
});
formData.append('info', blob);

4. Axios의 Content-Type 지정

const config = {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
};

5. 서버 전송

const { data } = await customAxios.post('/journey', formData, config);

전체 코드

export const uploadAPI = async (file, dataObj) => {
  try {
    // 폼데이터 객체 생성
    const formData = new FormData();
    
    // file 추가
    formData.append('file', file);

    // 객체를 JSON 타입으로 변환하여 Blob 객체 생성
    const blob = new Blob([JSON.stringify(dataObj)], {
      // type에 JSON 타입 지정
      type: 'application/json',
    });
    formData.append('info', blob);

    // Content-Type 지정
    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    };

    const { data } = await customAxios.post('/journey', formData, config);

    return data?.journeyId;
  } catch (err) {
    console.log(err);
  }
};

📌 다중 파일 추가

여러 개의 파일을 formData에 추가하려면 아래와 같이 반복문을 활용하여 넣어야 한다.

const formData = new FormData(); 
for (let i = 0; i < files.length; i++) { 
  formData.append("files", files[i]);
}