Spring Boot - Controller에서 Dto에 Data와 MultipartFile을 매핑하여 함께 받아보기

TroubleShooting

발생한 문제 및 고민한 점.

  미니프로젝트에서 게시글 작성을 할 때 이미지와 게시글의 정보들을 함께 받아서 저장하는데 지난주에 이 문제를 해결할 때는 Dto에 매핑을 굳이 하지 않고 다음 사진처럼 그냥 Data와 MultipartFile 을 분리하여 따로 받아서 다시 넣어주도록 해결했다.

하지만, 이러한 점은 기능을 모르는 사람이 보았을 때 각 데이터 간의 연관성을 파악하기도 힘들다는 생각을 했고, Dto에 매핑을 하고 싶어졌다.

 

해결 및 시도 방법

역시 해결의 시작은 구글링이다.

 

  1. 먼저, Data와 파일 자체 모두를 Base64로 인코딩하여 JSON으로 전달하는 방법을 알게 되었다. 좋은 방법이긴 하나 애초에 고려하지 않았던 이유가 몇가지가 있다.

1. 프론트엔드와 백엔드를 분리하여 처음으로 프로젝트를 하는 문제고 문제 해결하기가 힘들 수도 있겠다는 판단을 했다.
2. Base64를 쓰면 기존에 공부하면서 정리했던 것처럼 파일 크기가 33% 정도 증가하게되고 이는 네트워크 대역 낭비 문제가 다시 생기기 때문이다.

그렇기 때문에 다른 방법을 찾아야만 했다.

 

  2. Dto에 MultipartFile 필드를 만들기.

 

 지난주에 시도했을 때 정상적으로 작동하지 않았던 것 같은데 테스트를 잘못 했던 것인지 이번에는 Dto에 한번에 담을 수 있도록 수정했다.

 

세부사항 변화

기존

@PostMapping
public ResponseEntity<ResponseDto> createPost(CreatePostRequestDto createPostRequestDto, MultipartFile imageFile @AuthenticationPrincipal UserDetailsImpl userDetails) {

    createPostRequestDto.setUser(userDetails.getUser());

    return postService.createPost(createPostRequestDto);
}

수정

Dto에 Form-data로 날라오는 File과 Data를 받음.

@Getter
@Setter
public class CreatePostRequestDto {

    @NotBlank
    private String title;

    private User user;

    @NotBlank
    private String artist;

    @NotBlank
    private Post.Genre genre;

    @NotBlank
    private String content;

    @NotBlank
    private MultipartFile imageFile;

    @NotBlank
    private String videoUrl;
}

@PostMapping
public ResponseEntity<ResponseDto> createPost(CreatePostRequestDto createPostRequestDto, @AuthenticationPrincipal UserDetailsImpl userDetails) {

    createPostRequestDto.setUser(userDetails.getUser());

    return postService.createPost(createPostRequestDto);
}

회고

.  해결을 하긴 했으나 중간의 테스트 실수로 시간을 많이 사용한 듯하다.

 @ModelAttribute를 사용해서 하는 경우가 있던데 정확한 용도를 찾아보고 공부해봐야겠다.