Multipart/form-data란?

2021-02-15

Multipart/form-data

프로젝트를 하면서 알게 되었던 Multipart/form-data에 대해 정리를 한 내용 입니다.

이번 프로젝트를 진행하면서 Vue 페이지 쪽에서 백엔드 쪽으로 이미지 파일을 전송하는 경우가 있었습니다.

이때 사용한 Multipart에 대해서 간단히 알아봤습니다.

form이란?

입력 양식 전체를 감싸는 태그입니다.

form은 컨트롤 요소(control element)로 구성됩니다.

텍스트, 버튼, 라디오 등이 컨트롤

name : form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송합니다.
action : form이 전송되는 서버 url 또는 html 링크입니다.
method : 전송 방법 설정. get은 default,
post는 데이터를 url에 공개하지 않고 숨겨서 전송하는 방법입니다.
autocomplete : 자동 완성. on으로 하면 form 전체에 자동 완성 허용합니다.
enctype : 폼 데이터(form data)가 서버로 제출될 때
해당 데이터가 인코딩되는 방법을 명시합니다.

그 중 오늘의 포스트는 entype의 속성값 중 하나입니다.

이 속성은 <form> 요소의 method 속성값이 “post”인 경우에만 사용할 수 있습니다.

entype 속성값

application/x-www-form-urlencoded

default 값으로, 모든 문자들을 서버로 보내기 전에 인코딩됨을 명시합니다.
text/plain

공백 문자(space)는 “+” 기호로 변환하지만,
나머지 문자는 모두 인코딩되지 않음을 명시합니다.
multipart/form-data ( ★ 오늘의 포스팅 주제)

모든 문자를 인코딩하지 않음을 명시합니다.
이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용합니다.

<form action="/home/uploadfiles" method="post" enctype="multipart/form-data">
    파일명 : <input type="file" name="myfile">
    <button type="submit">제출하기</button>
</form>

getParameter()의 사용

POST 방식에서 request.getParameter()메서드를

WAS에서 알아서 처리할 수 있도록 되어있는 이유는

form에서 method가 POST방식일 때는 디폴트값으로

enctype="application/x-www-form-urlencoded" 옵션이 설정 되어있기 때문에

이를 WAS에서 인식하고 알아서 in/output방식으로 데이터를 처리하기 때문입니다.

따라서. 이미지를 위해서 전송하는 경우 enctype가 Multipart로 설정해야하기 때문에

request.getParameter()로 데이터를 불러올 수 없게 됩니다.

참고 : [출처]gunbin91 Blog

Multipart가 생긴 이유

파일을 업로드 할 때, 사진 설명을 위한 input과 사진을 위한 input 2개가 들어간다고 가정합니다.

이 두 input 간에 Content-type은 사진 설명은 application/x-www-form-urlencoded 이 될 것이고,

사진 파일은 image/jpeg입니다.

두 종류의 데이터가 하나의 HTTP Request Body에 들어가야 하는데,

한 Body에서 이 2 종류의 데이터를 구분에서 넣어주는 방법도 필요해졌습니다.

그래서 등장하는 것이 multipart 타입입니다.

참고 : [출처]참고 사이트

MultipartRequest

MultipartRequest 객체를 알아보기 위해서 아래의 사이트를 참고하였습니다.

[출처]공식문서 사이트

MultipartRequest multi = new MultipartRequest(request, savePath, sizeLimit, "utf-8", new DefaultFileRenamePolicy());

해당 객체에 들어가는 파라미터들은 아래와 같습니다.

HttpServletRequest request = request 객체
String saveDirectory =저장될 서버 경로
int maxPostSize = 파일 최대 크기
String encoding = 인코딩 방식
FileRenamePolicy policy = 같은 이름의 파일명 방지 처리

JungHyun Baek

Multipart/form-data란?

form이란?

entype 속성값

getParameter()의 사용

Multipart가 생긴 이유

MultipartRequest

관련 메서드

mr.getContentType(“name”);

mr.getOriginalFileName(“form에서 보낸 파일의 name”);

mr.getFilesystemName(“form에서 보낸 파일의 name”);

mr.getFile(“form에서 보낸 파일의 name”);

mr.getFileNames()