기본적으로 form이 submit 되면 HTTP 헤더에 지정한 타입의 데이터가 Body에 담겨서 서버로 보내지게 됩니다.

정리하면 다음과 같습니다.

• HTTP Request 의 Body에 클라이언트가 전송하려는 데이터가 담김
• Body에 들어가는 데이터의 타입을 HTTP Header에 명시해 줌으로써 서버가 타입에 따라 알맞게 처리
• 해당 Body의 타입을 명시하는 Header가 Content-Type

이때 중요한 점은 HTTP Request의 Body가 한 종류의 타입이 대부분이라는 점입니다.

Content-Type도 한 종류만 명시할 수 있는데 예를 들어 text이면 text/plain, xml이면 text/xml, png이면 image/png 이런 식으로 명시하여 데이터를 서버로 전송하게 됩니다.

하지만 파일 업로드의 상황을 살펴보면 사진을 업로드 하느 경우 사진에 대한 설명을 위한 input과 사진 파일을 위한 input 이렇게 2개가 들어갑니다.

위 두 input에 대한 Content-Type은 전혀 다른데, 이미지의 설명에 대한 Content-Type은 application/x-www-form-urlencoded 일 것이고, 사진 파일에 대한 Content-Type은 image/png 일 것입니다.

두 종류에 대한 Content-Type이 하나의 HTTP Request Body에 들어가야 하는데 이때 2종류의 데이터를 구분해서 넣어주는 방법이 필요해서 multipart 라는 개념이 들어가게 되었습니다.

예제 코드

var photoFile = document.getElementById("photo");
const formData = new FormData();
formData.append("photo", photoFile.files[0]); // 파일 첨부
formData.append("comment", commentValue); // 텍스트 첨부
axios.post('<https://domain/form-post-url>', formData, { // 요청
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})