File Upload

@RequestParam

@RequestParam을 사용하는 경우 file 데이터 외에 json 형식의 데이터는 받을 수 없다.

single file 예제

1    @PostMapping("/request-param/single")
2    public String singleRequest(@RequestParam MultipartFile file){
3        return "request param single "+file.getOriginalFilename();
4    }

multi file & other request param 예제

여러개의 multi file paramter 사용 가능하며 List<MultipartFile> 도 사용 할 수 있다.
다만 RequestParam이 너무 많으면 유지보수가 힘들어지기 때문에 적은 파라미터일 때는 사용을 고려해 볼 수 있겠다

1    @PostMapping("/multi-with-other-params")
2    public String withOtherParamsRequest(@RequestParam MultipartFile file1, @RequestParam MultipartFile file2,
3                                         @RequestParam String name, @RequestParam String desc){
4        return "request param with other params "+file1.getOriginalFilename()+"_"+file2.getOriginalFilename()+
5                "_"+name+"_"+desc;
6    }

@RequestPart

@RequestPart를 사용하는 경우 file 데이터 외에 @RequestPart를 사용하여 json 데이터를 받을 수 있다.

single file & json 예제

backend code

1    @PostMapping("/with-request-part")
2    public String withRequestPart(@RequestPart MultipartFile file, @RequestPart RequestPartTestBody requestBody){
3        return "request part with request part "+file.getOriginalFilename()+"_"+requestBody.toString();
4    }
5
6    @Getter
7    @ToString
8    public class RequestPartTestBody {
9        private String name;
10        private String desc;
11    }

frontend code
json 파일을 넘길 때 new Blob() 객체로 변환하고 {type: "application/json"} 으로 ContentType을 지정해줘야 정상적으로 동작한다.

1async function submitRequestPartWithRequestPart() {
2    const bodyData = new FormData();
3    const file = document.querySelector("#file").files;
4    bodyData.append("file", file[0]);
5    bodyData.append(
6        "requestBody",
7        new Blob(
8            [
9                `{"name": "${document.querySelector("#name").value}", "desc": "${
10                    document.querySelector("#desc").value
11                }"}`,
12            ],
13            { type: "application/json" }
14        )
15    );
16
17    await post(bodyData, "request-part/with-request-part", "request-part-with-request-part");
18}
19
20async function post(bodyData, uri, preId) {
21    const context = "[[@{/}]]";
22    await fetch(context + uri, {
23        method: "POST",
24        body: bodyData,
25    })
26        .then((res) => {
27            if (res.ok) {
28                return res.text();
29            } else {
30                return res.json();
31            }
32        })
33        .then((res) => {
34            if (typeof res == "object") {
35                document.querySelector(`#${preId}`).innerHTML = res.error;
36                document.querySelector(`#${preId}`).className = "error";
37            } else {
38                document.querySelector(`#${preId}`).innerHTML = res;
39                document.querySelector(`#${preId}`).className = "result";
40            }
41        });
42}

@ModelAttribute

@ModelAttribute를 사용하는 경우 file 타입 필드와 기타 json으로 받고싶은 데이터들을 RequestDto로 한번에 처리할 수 있다.

RequestDto 예제

1    @PostMapping(value = "in-the-request-body", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
2    public String inTheRequestBody(@ModelAttribute ModelAttributeTest2Body requestBody){
3        return "model attribute in the request body "+requestBody.toString();
4    }
5
6    @Getter @Setter
7    public class ModelAttributeTest2Body {
8        private String name;
9        private String desc;
10        private MultipartFile file;
11
12        public String toString(){
13            return "{"+
14                    "\"name\":\""+name+"\","+
15                    "\"desc\":\""+desc+"\","+
16                    "\"file\":\""+file.getOriginalFilename()+"\"}";
17        }
18    }

1async function submitModelAttributeInTheRequestBody() {
2    const bodyData = new FormData();
3    const file = document.querySelector("#file").files;
4    bodyData.append("file", file[0]);
5    bodyData.append("name", document.querySelector("#name").value);
6    bodyData.append("desc", document.querySelector("#desc").value);
7
8    await post(bodyData, "model-attribute/in-the-request-body", "model-attribute-in-the-request-body");
9}

전체 코드

request-annotation-test

결론

둘 중 하나로 통일하기 위해서 스터디를 했으나 결과적으로 상황에 따라 사용할 수 있음을 확인했다.
@RequestPart의 경우 file부/json부로 나눠야 하고 front에서 json을 생성하여 Blob 객체로 변환하는 작업까지 이루어져야 하기 때문에 번거로울 수 있다. @ModelAttribute의 경우에는 front에서 FormData에 각각 append하여도 requestBody에 자동으로(정확히는 변수명으로 추측되는 setter를 사용해서) 매핑된다.
하지만 내가 담당하고 있는 프로그램의 경우 request로 받는 json 구조가 굉장히 복잡하기 때문에 테스트 측면에서는 @RequestPart를 유지하는 것이 좋아보인다.

추가로 각 어노테이션의 특징과 RequestDto로 매핑하는 과정을 정리하고자 한다.

Annotation별 특징, 데이터 매핑 방법

출처link

@RequestParam

간단한 name-value 형태의 데이터를 주고받을 때 사용할 수 있다. @RequestPart와 마찬가지로 MultipartFile을 받을 때도 사용할 수 있다.
기본적으로 required 속성이 true이기 때문에 optional 데이터의 경우 required=false 설정을 해줘야 한다.

@RequestBody

HTTP 요청으로 넘어오는 body 내용을 HttpMessageConverter를 통해 역직렬화한다. json 기반의 메시지를 사용하는 요청인 경우 적용될 수 있으며 Multipart요청이 아닌 데이터를 받는 역할을 한다.

HttpMessageConverter json 데이터를 역직렬화를 통해 객체로 만드는 주체.
RequestMappingHandlerAdapter가 데이터의 MIME 타입을 확인한 후 application/json인 경우에는 MappingJackson2HttpMessageConverter를 사용하도록 선정한다.
MappingJackson2HttpMessageConverter는 내부적으로 ObjectMapper를 사용하여 데이터를 변환한다.(출처link)
ObjectMapper는 기본 생성자와 @Getter만 있으면 데이터를 변환할 수 있기 때문에 RequestDto에 @Setter annotation은 불필요하다.
(정확히는 @Getter, @Setter 둘 중 하나만 있어도 되지만 객체 생성 후 변수에 접근하기 위해 @Getter를 사용)(출처link)

@RequestPart

MultipartFile이 포함되는 경우 MultipartResolver가 동작하여 역직렬화한다. 데이터에 MultipartFile이 포함되지 않는 경우 @RequestBody와 같이 동작하게 된다.
따라서 @RequestBody가 필요하지만 바이너리 데이터가 포함되는 경우 사용할 수 있다.

@ModelAttribute

Spring Controller에서 값을 받을 때 default 로 적용되는 어노테이션이다. request body, request parameter 모두를 받을 수 있고 MultipartFile 이 포함되어 있을 때도 처리할 수 있다.
다만 @RequestBody, @RequestPart와 달리 기본생성자+@Setter 또는 @AllArgsConstructor가 있어야 RequestDto에 바인딩할 수 있다.(출처link)