서블릿을 이용한 HTML Form 파일 업로드

HTML Form을 이용한 파일 전송

파일을 서버에 전송하기 위해서는 순수 서블릿을 이용하는 방법과 스프링이 지원하는 MultipartFile를 이용하는 방법이 있는데 이 포스팅에서 한번 알아보도록 하겠습니다.

 

우선 알아두어야 할 점은 HTML Form을 통해 파일을 업로드 하고자 할 때는 일반적으로 사용했던 www-form-urlencoded Content Type이 아닌 다른 형식(multipart/form-data)을 사용한다는 점입니다!

 

Content-Type : application/x-www-form-urlencoded

• 가장 기본적인 방법
• HTTP Body에 쿼리 파라미터 형식으로 전송됩니다.
• 문자 전송에 사용됩니다.

Content-Type : multipart/form-data 

• 문자 뿐만 아니라 파일 전송도 지원
• 파일은 바이너리로 전송됩니다.
• 이 방식을 사용하려면 Form 태그에 별도로 enctype="multipart/form-data"를 지정해야 합니다.

<form th:action method="post" enctype="multipart/form-data">
    <ul>
        <li>상품명<input type="text" name="itemName"></li>
        <li>파일<input type="file" name="file" ></li> </ul>
    <input type="submit"/>
</form>

• 이 Content-Type을 사용하면 Form에서 각 데이터들은 각각의 Part로 나누어져 POST 전송 됩니다. 서블릿에서는 part별로 데이터를 받아볼 수 있습니다.
• 컨트롤러에서 request.getParts()를 통해 multpiart/form-data 전송 방식에서 각각 나누어진 Part를 받아서 확인할 수 있습니다.

로그 (첫번째 인자는 itemName에 대한 part, 두 번째 인자는 File에 대한 part)

+ Tip : application.properties에 추가하면 HTTP 요청 메시지 로그를 통해 확인 가능합니다. 추가적으로 폼에서 전송된 멀티파트의 각 파트의 정보를 볼 수 있습니다.

logging.level.org.apache.coyote.http11=debug

+ application.properties에서 multipart에 대한 처리 옵션을 끄면 서블릿 컨테이너가 multipart 데이터를 처리하지 않습니다. 디폴트는 true로 설정되어 있습니다.

spring.servlet.multipart.enabled=false

+ 서블릿에서 multipart에 대한 처리를 하는 경우에는 RequestFacade가 아닌 StandardMultipartHttpServletRequest를 사용합니다. 

서블릿을 이용한 HTML Form 파일 업로드

서블릿을 통해 간단하게 파일을 서버에 업로드 해보도록 하겠습니다.

@Slf4j
@Controller
@RequestMapping("/servlet/v2")
public class ServletUploadControllerV2 {

    @Value("${file.dir}")
    private String fileDir;

    @GetMapping("/upload")
    public String newFile()
    {
        return "upload-form";
    }

• file.dir은 업로드할 경로로 application.properties에 등록해서 사용했습니다.

file.dir=/Users/kdo6301/Desktop/Files/

• upload-form에는 form에 enctype="multipart/form-data"를 지정해주고 상품과 파일을 입력할 수 있는 폼을 작성했습니다.

    @PostMapping("/upload")
    public String saveFileV2(HttpServletRequest request) throws ServletException, IOException
    {
        log.info("request = {}",request);

        String itemName = request.getParameter("itemName");
        log.info("itemName = {}",itemName);

        Collection<Part> parts = request.getParts();
        log.info("parts={}",parts);

        for (Part part : parts) {
            log.info("=== PART ===");
            log.info("name={}",part.getName());
            Collection<String> headerNames = part.getHeaderNames();
            for (String headerName : headerNames) {
                log.info("header {} : {}", headerName, part.getHeader(headerName));
            }

            // content-disposition ; filename
            log.info("submittedFileName={}",part.getSubmittedFileName());
            log.info("size={}",part.getSize());

            // 데이터 읽기
            InputStream inputStream = part.getInputStream();
            String body = StreamUtils.copyToString(inputStream, StandardCharsets.UTF_8);
//            log.info("body={}",body);

            // part를 통해 전송된 데이터 저장
            if(StringUtils.hasText(part.getSubmittedFileName()))
            {
                String fullPath = fileDir + part.getSubmittedFileName();
                log.info("파일 저장 fullPath = {}", fullPath);
                part.write(fullPath);
            }
        }

        return "upload-form";
    }

 

• request.getParts()를 통해 multpiart/form-data 전송 방식에서 각각 나누어진 Part를 받아서 확인할 수 있다고 했습니다.
• 폼으로부터 전송된 각 파트를 iterator로 각 파트에 대한 정보(헤더)를 출력했습니다.
• 파일 형식인 경우 (part.getSubmittedFileName() Not Null ) 해당 파트를 fullPath에 write해서 저장 
  • part.write() : 파일 저장 
  • part.getSubmittedFileName() : 클라이언트가 전달한 파일명
  • part.getInputStream() : Part의 전송 데이터를 읽을 수 있습니다.

로그

서블릿이 제공하는 Part를 이용해서 파일을 서버에 전송해보았습니다. 편하긴 하지만 서블릿 객체를 써야 하고, 추가로 파일 부분만 구분하기 위한 조건이 좀 까다롭습니다. 스프링이 이 부분을 얼마나 편리하게 제공해주는지 알아보도록 하겠습니다.

---

스프링을 이용한 HTML Form 파일 업로드

스프링은 MultiPartFile 이라는 인터페이스로 멀티파트 파일을 매우 편리하게 지원합니다.

@PostMapping("/upload")
public String saveFile(@RequestParam String itemName,
                       /* @ModelAttribute도 가능*/
                       @RequestParam MultipartFile file, HttpServletRequest request)
        throws IOException
{
    log.info("request = {}",request);
    log.info("itemName = {}",itemName);
    log.info("file = {}",file);

    if(!file.isEmpty())
    {
        String fullPath = fileDir + file.getOriginalFilename();
        log.info("파일 저장 fullPath = {}",fullPath);
        file.transferTo(new File(fullPath));
    }

    return "upload-form";
}

POST 로 HTML 폼 전송 시 파일에 대한 타입을 MultiPart로 지정하면 @RequestParam이나 @ModelAttribute로 받을 수 있습니다.

서블릿과 비교하면 참 쉽고 간단하죠?

 

MultiPartFile의 주요 메소드

• getOriginalFilename() : 업로드 파일 명 
• transferTo(File) : 파일 저장 

 

<참고자료>

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술 - 인프런 | 강의