멀티파트 폼 데이터(Multipart Form Data)

오늘은 멀티파트 폼 데이터(Multipart Form Data)  에 대해서 공부하고 정리해보려고 합니다.

 

 

멀티파트 폼 데이터(Multipart Form Data) 란?

멀티파트 폼 데이터는 HTTP를 이용해서 데이터를 보낼 때 사용하는 형식 중 하나로, HTML Form 태그를 이용해서 데이터를 보낼 때,  만약 바이너리 데이터를 보내야 한다 라면 멀티파트 폼 데이터를 이용해서 보내야 합니다.

 

특징

• 텍스트 데이터와 바이너리 데이터를 같이 보낼 수 있습니다.
• 경계를 통해 각 파트를 구분합니다.
• 각 파트는 Content-Disposition 헤더를 포함합니다.

구제척으로 이런 HTTP requst 로 요청을 보냅니다.

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123
Content-Length: 123456

------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="userName"

Alice
------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="description"

Hello World
------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="profileImage"; filename="alice.png"
Content-Type: image/png

<파일의 바이너리 데이터가 여기 들어갑니다...>
------WebKitFormBoundaryABC123--

 

 

HTML Form 으로 멀티파트 폼 데이터로 요청 보내는 방법 

<form  enctype="multipart/form-data" action="/products/register" method="post">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <label for="image">Select multiple files:</label>
                    <input type="file" name="image" id="image" multiple>
                </div>

                <div class="col-lg-6 col-md-6">
                    <input type="text" name="name" placeholder="상품명">
                </div>
                <div class="col-lg-6 col-md-6">
                    <input type="text" name="original_price" placeholder="상품 가격">
                </div>
                <div class="col-lg-6 col-md-6">
                    <input type="text" name="price" placeholder="가격">
                </div>
                <div class="col-lg-6 col-md-6">
                    <input type="text" name="description" placeholder="설명">
                </div>
                <div class="col-lg-6 col-md-6">
                    <input type="text" name="quantity" placeholder="수량">
                </div>

                <div class="col-lg-12 text-center">
                    <button class="primary-btn">SEND MESSAGE</button>
                </div>
            </div>
        </form>

 

• form 태그에 enctype="multipart/form-data"를 지정하여 멀티파트 전송을 가능하게 합니다.
• input 태그의 type을 "file"로 설정해 사용자로부터 파일을 입력받을 수 있도록 합니다.
• 업로드된 파일을 서버에서 식별하기 위해 input 태그의 name 속성을 "image"로 지정합니다.

 

Servlet 을 이용해서 멀티파트 폼 데이터 요청을 처리하는 코드

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String action = req.getPathInfo();
        if(action.equals("/register")) {
            Product product = new Product(
                    req.getParameter("name"),
                    Integer.parseInt(req.getParameter("original_price")),
                    Integer.parseInt(req.getParameter("price")),
                    req.getParameter("description"),
                    Integer.parseInt(req.getParameter("quantity"))
            );


            Collection<Part> parts = req.getParts();
            productService.registerProduct(product,parts);
            resp.sendRedirect("/products/list");
        }

    }

 

public void registerProduct(Product product , Collection<Part> parts) {
        int productId = productDao.insert(product);
        for (Part part : parts) {
            if(part.getName().equals("image")) {
                String savedPath = UploadUtil.upload(part);
                productImageDao.insert(productId,savedPath);
            }
        }
    }

 

•  if(part.getName().equals("image")) : 여러 파트 중에서 name이 image 인것만 찾아오는 것입니다.

 

정리

• 멀티파트 폼 데이터는 서버에 바이너리 데이터를 포함한 데이터를 보내야 하는 경우 사용합니다.
• 경계를 통해 각 파트(Part)를 구분합니다.
• HTML form enctype 에 enctype="multipart/form-data" 지정합니다.
• input 태그의 type을 "file"로 설정해 사용자로부터 파일을 입력받을 수 있도록 합니다.
• 업로드된 파일을 서버에서 식별하기 위해 input 태그의 name 속성을 "image"로 지정합니다.