파일 업로드 하는 방법(Form, Spring)

이번에 진행하고 있는 프로젝트에서 파일을 업로드하는 기능이 필요해서 공부하게 되었다.

1. 두 가지 전송 방식

HTML Form의 데이터 전송 방식은 크게

1. x-www-form-urlencoded

Http Body에 bookname=jpabook&quantity=31 와 같이 key-value형식을 &로 연결지어 문자를 전송한다.

2. multipart/form-data

바이너리 데이터와 문자 데이터를 동시에 전송할 수 있는 방법이다.

multipart/form-data에 대해서 더 알아보자.

 

2. multipart/form-data

<form action="/save" method="post" enctype="multipart/form-data">
    <input type="text" name="bookname"/>
    <input type="file" name="imgfile1" />
</form>

폼 데이터가 서버로 submit 될 때 인코딩 되는 방식을 지정하는 enctype(encryptiontype)을 해당 방식으로 설정한다.

그렇게 아래와 같은 형식으로 Http 메시지가 보내진다. 

POST /save HTTP/1.1
Host: ~
Content-Type: multipart/form-data; boundary=(random값 x)

x
Content-Disposition: form-data; name="bookname"
jpa
x
Content-Disposition: form-data; name="imgfile1"; filename="jpa.png"
Content-Type: image/png
4121312asdasd12345f12dfas123...............(binary 데이터가 넘어감)
x

 

3-1. 스프링에서 multipart 요청을 처리하는 방법 1

Form에서 text input과 file input 2가지 데이터를 동시에 전송해보았다.

HttpServletRequest에는 이름에서부터 알 수 있듯이 복잡한 multipart 처리를 위한 StandardMultipartHttpServletRequest가 할당된 것을 볼 수 있다.

spring.servlet.multipart.enabled=true

위의 옵션이 spring의 기본 설정인 true일 때만

Spring Boot의 DispatcherServlet에서 MultipartResolver를 실행한다.

그리고 http multipart 요청이 들어오면 MultipartResolver가 서블릿 컨테이너가 전달하는 일반적인 HttpServletRequest를 MultipartHttpServletRequest로 변환해서 반환한다.

이렇게 되면 컨트롤러에서는 HttpServletRequest 대신에 MultipartHttpServletReques를 주입받아 더 많은 기능을 사용할 수 있다.

이제 HttpServletRequest에서 Part를 얻어오고 Part의 기능을 이용하여 파일 관련 편의 기능, 데이터 읽기, 파일 저장하기를 해보자!

우선 파일을 저장할 경로를 설정한다.

#application.properties

file.dir = /Users/khs/Documents/Development/workspace/FileUpload/file/

 

@PostMapping("/upload")
public String saveFileV1(HttpServletRequest request) throws ServletException, IOException {
    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));
        }

        //편의 기능 메서드
        log.info("submittedFileName={}", part.getSubmittedFileName());
        log.info("size={}", part.getSize());

        //데이터 Read
        InputStream inputStream = part.getInputStream();
        String body = StreamUtils.copyToString(inputStream, StandardCharsets.UTF_8);
        log.info("body={}", body);
        
        //파일에 저장하기
        if (StringUtils.hasText(part.getSubmittedFileName())) {
            String fullPath = fileDir + part.getSubmittedFileName();
            log.info("파일 저장 fullPath={}", fullPath);
            part.write(fullPath);
        }
        
        
    }
}

위와 같이 이미지 파일이 잘 저장된 것을 볼 수 있다.

 

3-2. 스프링에서 multipart 요청을 처리하는 방법 2( 추천! ⭐️⭐️⭐️)

@PostMapping("/upload")
public String saveFile(@RequestParam("itemName") String itemName,
                       @RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {
    log.info("request={}", request);
    log.info("itemName={}", itemName);
    log.info("multipartFile={}", file);
    if (!file.isEmpty()) {
        String fullPath = fileDir + file.getOriginalFilename();
        log.info("파일 저장 fullPath={}", fullPath);
        file.transferTo(new File(fullPath)); //파일저장
    }
    return "upload-form";
}

Spring에서 제공해주는 Multipart class를 이용하여 간편하게 처리 가능하다.