[Spring] Multipartfile, Json 동시에 전송하는 방법 2가지

 

프로젝트를 진행하며 이미지 파일을 다룰 일들이 있었는데요

이번 포스팅에서는 많은 시행착오를 통해

제가 알게된 이미지 파일과 Json Data를 함께 전송하는

방법 2가지를 정리해보겠습니다.

 

1. 모든 값 Form-Data로 전송

 

제가 처음 시도해본 방법입니다. 

위의 말 그대로 모든 값을 Form-Data로 전송하는 것입니다.

Postman을 이용하여 보여드리겠습니다.

 

 

 

이때 이미지 파일을 보내는 Key값은 Text가 아닌 File로 변경해주셔야 합니다.

 

 

이제 Controller를 구현해보겠습니다.

@PostMapping("/upload")
public void post(@ModelAttribute PostRequestDto postRequestDto){
    postService.post(postRequestDto);
}

코드를 설명 드리자면,

/upload로 Post 요청을 보내게 되면

@ModelAttribute 어노테이션을 활용하여 하나의 객체를 매개변수로 받습니다.

 

 

매개변수로 받을 Dto 입니다.

Multipartfile와 Json Data를 함께 받으려면

Dto를 byte 형식으로 바꾸는 직렬화를 해주어야 합니다.

그래서 implements serializabled을 추가해주었습니다.  

@Getter
public class PostRequestDto implements Serializable {
    private String name;
    private Long age;
    private MultipartFile file;
}

 

1번째 방법이다보니 가장 간단합니다.

하지만,

이 방법을 쓰게 된다면 모든 값을 Form-Data로 보내게 됩니다.

Form-Data는 이미지와 같은 파일들을 받기 위한 Content Type입니다.

형식을 맞춰줘야겠지요?

이것을 보완한 방법이 바로 2번째 방법입니다.

 

 

2. 모든 값 Form-Data로 전송하지만,  Json 값들은 CONTENT TYPE application/json으로 타입 지정

 

첫번째 방법을 보완하기 위한 방법입니다.

첫번쨰 방법과 차이점은 Form-Data로 보내는 것은 같지만 

Dto를 따로 분리하여 Content Type을 application/json으로 지정한다는 점입니다.

 

이떄 Json값은 일반 raw로 보낼때와 동일하게 적어주시면 됩니다.

 

 

*프론트엔드 참고*

프론트엔드에서는 Form-Data 인스턴스를 생성하여 해당 인스턴스에
"dto(임의)"라는 key값과 이에 해당하는 JSON화한 value를 추가,
File도 마찬가지로 key와 value로 추가해주면 됩니다.

 

 

Controller를 구현해보겠습니다.

@PostMapping("/upload")
public void upload(@RequestPart MultipartFile file, @RequestPart InfoDto dto) throws IOException {
    fileService.upload(file, dto);
}

@RequestPart 어노테이션을 활용하여 이미지와 Dto(Json 값들)을 각각 파싱해줍니다.

multipartfile과 Dto를 같이 받기 위해서는 @RequestPart를 사용해야 합니다.

 

 

Json 값들을 받아올 Dto를 생성해줍니다.

@Getter
public class InfoDto {
    private String name;
    private Long age;
}

 

 

피드백은 언제나 환영입니다!!