FormData와 JSON을 함께 보내는 방법

웹 개발을 하다 보면 서버로 데이터를 전송할 때 파일과 JSON 데이터를 동시에 보내야 하는 경우가 종종 있다. 이런 상황에서 multipart/form-data와 application/json 두 가지 Content-Type을 어떻게 함께 사용할 수 있을까?

---

Blob 객체를 활용한 해결책

이 문제의 핵심은 Blob 객체를 사용하는 것이다. Blob(Binary Large Object)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다루기 위한 객체다. 하지만 여기서는 JSON 데이터를 Blob으로 변환하여 FormData에 추가하는 방식으로 활용한다.

 

구현방법

const formData = new FormData();
formData.append('file', file);
formData.append(
    'requestItem',
    new Blob([JSON.stringify(requestItem)], { type: 'application/json' }),
);

1. FormData 객체를 생성
2. 파일은 그대로 formData.append('file', file)로 추가
3. JSON 데이터는 JSON.stringify()로 문자열화한 후, new Blob()으로 감싸 application/json 타입의 Blob 객체로 변환
4. 변환된 Blob 객체를 FormData에 추가

 

장점

• 단일 요청: 파일과 JSON 데이터를 하나의 요청으로 보낼 수 있음
• 타입 유지: JSON 데이터의 application/json 타입을 유지할 수 있음
• 서버 호환성: 대부분의 서버 측 프레임워크에서 이 방식의 데이터를 쉽게 처리할 수 있음

 

주의사항

이 방법을 사용할 때는 서버 측에서 멀티파트 요청과 JSON 파싱을 모두 처리할 수 있어야 한다.
서버 설정에 따라 약간의 추가 작업이 필요할 수 있다. 이렇게 Blob 객체를 활용하면 multipart/form-data와 application/json을 함께 사용하는 문제를 효과적으로 해결할 수 있다.