multipart/form-data 파일 업로드하기

게시판에서 선택한 파일을 multipart/form-data 형식으로 업로드 해야하는 상황입니다.
multipart/form-data 는 백엔드 할때도 까다롭게 느껴졌는데 다시 프론트에서 만나게 됐어요.
이제 다시 만나도 당황하지 않기 위해서 
첨부파일 업로드 기능을 구현하면서 새롭게 알게된 점을 정리해놓겠습니다!

 

✔ 개념

Multipart/formdata 란?

 

이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용합니다.

hi.png 라는 이름을 가진  파일을 올리려고 할 때, 우리는 hi.png 파일 뿐만 아니라 해당 파일의 이름, 사이즈 등을

같이 저장하고 싶어합니다.

이럴 때 해당 파일과 파일 정보를 같이 전달하기 위해서 multipart/formdata 를 사용합니다.

 

✔ 해결 방법

FormData 사용

const formData = new FormData();
formData.append('file', file, file.name); // (name, value, filename)

FormData 에 key ,value  값을 append 해서 api 를 호출했더니 multipart/formdata 가 서버로 잘 전달되었습니다.

 

이 과정에서 헷갈렸던 부분 두 가지가 있는데, 구글링을 하면서 많이 본 정보들이었습니다.

 

1. multipart/formdata 를 넘겨주기 위해서는 enctype 을 정해줘야 한다.

        <form enctype='multipart/form-data'>  

               <input type='file' />

        </form>

=> FormData 에 담으면 input file 을 인코딩하기 때문에 위와 같이 enctype 을  따로 명시해주지 않아도 multipart/formdata 포맷으로 전달 되었습니다.

 

2. post 로 요청해야한다.

=> 요청은 백엔드 api 에 맞게 보내주면 된다. 

 

FormData는 들어있는 데이터가 콘솔 로그에 찍히지 않아서 저처럼 

데이터가 들어간건지 아닌지 헷갈리시는 분들 계실텐데요,

 

api 를 호출해서 formdata 를 우선 전달해보고, 브라우저에서 호출한 api 의 payload body 부분을 확인해보세요.

저는 텅 빈 body 가 계속 전달되고 있었습니다.🙃

 

 

 

✔ 참고

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Using FormData Objects - Web APIs | MDN

https://ko.javascript.info/formdata

FormData 객체

https://velog.io/@shin6403/HTTP-multipartform-data-%EB%9E%80

HTTP multipart/form-data 란?