파일 전송을 하려면 어떻게 해야할까

목차

• Content-Type: multipart/from-data
• Content-Type은 무엇일까?
• MIME 타입이란?

Content-Type: multipart/form-data

헤더 Content-Type는 엔티티 바디의 미디어 타입을 명시한다.
multipart/from-data 타입으로 파일을 전송 할 수 있다.

const file = ...;
const formData = new FormData();

formData.append('file', file);

fetch(url, {
  method: 'POST',
  // FormData는 Content-Type: multipart/form-data로 인코딩 된다.
  // headers:{ 'Content-Type': 'multipart/form-data'}
});

Content-Type은 무엇일까?

리소스의 미디어 타입이 무엇인지 알려준다.

res 에서 클라이언트가 받는 데이터 타입을 명시한다. 이 때, 브라우저가 MIME 스니핑을 진행하면 무시될 수 있다. X-Content-Type-Options 헤더를 nonsniff로 지정하여 막을 수 있다.

req에서 클라이언트는 보내는 데이터의 타입을 명시한다.

MIME 타입이란?

MIME은 Multipurpose Internet Mail Extensions의 약어로 바디의 메세지 타입이 무엇인지 알려준다. 브라우저는 MIME타입으로 데이터를 올바르게 파싱할 수 있으므로 브라우저, 서버 둘다 올바른 MIME타입을 설정하는 것이 중요하다.

type/subtype // 으로 구성됨

text/plain
text/html
image/jpeg
audio/mpeg
video/mp4
application/octet-stream
...
multipart/form-data
multipart/byteranges

multipart/form-data을 이용하면 여러 객체를 하나의 메세지로 전송할 수 있다.