multipart/form-data란?
먼저 multipart/form-data를 설명하기 전에...
multipart/form-data를 이해하기 위해서는 HTTP, multipart에 대한 이해가 필요했다.
HTTP
쉽게 말하자면 http란 클라이언트와 서버 사이에 데이터를 주고 받을때 이루어지는 통신이다.
HTTP는 아래의 이미지와 같이 4개의 파트로 나눌 수 있다
http통신이 이루어질때 클라이언트에서 서버에게 보내려는 데이터를 Message Body에 담아서 보낼 수 있다.
여기서 Message Body에 들어가는 데이터 타입을 HTTP Header에서 명시할 수 있는데 그게 바로 Content-type이다.
⇒ multipart도 데이터 타입을 명시해주기 위해 사용되는 타입 중 하나이다.
multipart/form-data
multipart/form-data도 데이터 타입 중 하나에 해당하는 것이다.
보통 클라이언트 상에서 이미지를 업로드하여 서버로 전송하기 위해서 form태그 사용한다
⇒ form 태그에서는 encType로 타입을 명시해준다. (타입에 따라서 인코딩 방식이 다름)
예시) <form name= "profile" encType="multipart/form-data">
<form name="profile">
// <form name= "profile" encType="multipart/form-data">
<div>
<h1>프로필</h1>
<h3>사용자 아이디 {email}</h3
<h2>이미지 업로드</h2>
</div>
<input
name="profile_img"
type="file"
accept="image/*"
onChange={onChange}
placeholder="업로드"
/>
<button type="submit" onClick={onUpload}>
업로드
</button>
</form>
multipart/form-data 타입은 기본값이 아니다. 여러가지 타입 종류가 있다.
✔️ application/x-www-form-urlencoded : 가장 기본적인 타입
위의 코드처럼 enctype 옵션을 지정하지 않으면 웹브라우저는 요청 HTTP 메세지 헤더에 Content-Type : application/x-www-form-urlencoded를 붙여서 알아서 타입 지정함. 기본값
모든 문자들을 서버로 보내기 전에 인코딩됨.
✔️ multipart/form-data
모든 문자를 인코딩하지 않음. 이 방식은 파일이나 이미지를 서버로 전송할 때 주로 사용
나는 form태그에 encType를 나타내는 것과 달리 axios요청을 보낼때 헤더에 content-type을 multipart/form-data로 지정해주었다
axios
.post("<http://localhost:1234/upload>", formData, {
headers: {
"content-type": "multipart/form-data",
},
})
.then((res) => {
console.log({ res });
})
.catch((res) => {
console.log(res);
});
그렇다면 multipart이란 무엇이고, 사진이나 파일을 보낼때는 왜 multipart/form-data타입을 사용하는 것일까?
⇒ 보통 파일이나 사진의 경우 클라이언트에서 서버로 http통신을 보낼때 여러 종류의 데이터를 하나의 message body에 담겨져 가기때문에 데이터를 구별해주기 위해서 multipart타입을 사용하는 것이다.
- multipart : 클라이언트가 서버에 HTTP요청을 보낼때 바디 부분에 들어가는 데이터를 타입을 명시해주는데 , 서로 다른 종류의 데이터가 하나의 바디에 담겨서 보내야하는 경우 사용하는 타입 종류. (여러종류의 데이터를 구분하기 위해서 사용하는 방법)
⇒ 웹 클라이언트가 서버로 한번에 여러개 종류의 파일들을 업로드할때 multipart타입을 명시해줘서 데이터가 여러 부분으로 나뉘어서 전송된다.
예) 사진 업로드하는 경우⇒ 사진에 대한 설명, 사진 파일 input 2개가 존재. 이러한 input들은 데이터 타입이 다르고 두종류의 데이터를 하나의 HTTP Request Body에 구별해서 넣어주기 위해 multipart라는 타입 사용.