[FormData 전송] 배열 데이터를 POST할 때 [object Object] 에러가 발생한 이유와 해결 방법

프로젝트에서 이미지 업로드 기능을 구현하며 POST 요청을 보낼 일이 있었는데,
요청 payload에 객체 배열을 포함하자 다음과 같은 문제가 발생했습니다.

[object Object] 형태로 전송되어 서버에서 파싱 오류 발생

---

🔍 문제 원인: 배열 형태의 객체가 그대로 직렬화되지 않음

일반적으로 JSON API에서는 JSON.stringify()로 객체를 문자열로 변환해 전송하면 문제가 해결됩니다.
하지만 이번 케이스는 FormData를 이용한 multipart/form-data 방식이었고,
배열 속 객체에 File 타입이 포함되어 있었습니다.

{
  images: [
    {
      displayOrder: 1,
      imageType: 'thumbnail',
      imageFormat: 'jpeg',
      imageFile: File
    },
    ...
  ]
}

이 경우 JSON.stringify()를 사용할 수 없기 때문에, 파일까지 포함된 배열 데이터를 직접 직렬화할 수 없었습니다.

---

✅ 해결 방법: 배열을 선형적으로(flat하게) 풀어서 전송

FormData에서는 배열 형태로 데이터를 보낼 때 key 이름을 명시적으로 지정해주는 방식이 필요합니다.
즉, 배열을 다음과 같이 key-value 쌍으로 직접 펼쳐서 전송하면 정상적으로 처리됩니다.

images[0].displayOrder = 1  
images[0].imageType = 'thumbnail'  
images[0].imageFormat = 'jpeg'  
images[0].imageFile = File  
...

---

🛠️ 실제 코드 예시

export function createChannelImageContent(formData: CreateChannelImageContent) {
  const form = new FormData();

  Object.keys(formData).forEach((key) => {
    if (key === 'images') {
      formData[key].forEach((image, index) => {
        form.append(`images[${index}].displayOrder`, String(image.displayOrder));
        form.append(`images[${index}].imageType`, image.imageType);
        form.append(`images[${index}].imageFormat`, image.imageFormat);
        form.append(`images[${index}].imageFile`, image.imageFile);
      });
    } else {
      form.append(key, formData[key]);
    }
  });

  return authHttpClient.post(`api 주소`, form, {
    headers: { 'Content-Type': 'multipart/form-data' },
  });
}

---

📌 요약

• FormData로 배열 객체를 전송할 경우, 자동 직렬화되지 않음 → [object Object] 에러 발생
• 특히 File 인터페이스가 포함된 경우 JSON.stringify()도 사용할 수 없음
• 해결법: 배열을 key[index].fieldName 형태로 평탄화하여 전송
• 프론트와 백엔드간의 데이터 형식을 명확하게 하는데도 도움이 된다