[TIL-20260213] Swagger에서 이미지 업로드 테스트

 

🍀 To Do List

✔️ 사이드 프로젝트 - aceess token 유효성 체크 api, 토큰 재발급 api, 유저 정보 조회/수정 api 

 

 

👩🏻‍💻 Today I Learned ...

Swagger에서 MultipartFile과 DTO 함께 받기

 

 

유저 프로필 수정 API 개발하면서 요청 dto에 프로필 이미지 파일을 `MultipartFile`로 받게 해뒀는데,

Swagger UI에서는 `String` 형태로 받도록 보여지고 있었다.

 

Swagger는 별도 설정이 없으면 Content Type을 기본값인 `application/json`으로 사용하기 때문에, 파일 업로드를 포함한 요청 구조를 제대로 인식하지 못 하는 문제였다.

 

 

Controller에서 Content type 명시하기

 

`@PutMapping`에 `consumes` 속성에 Content Type을 명시해줬다.

 

 

이렇게 하면 Swagger가 해당 API의 Content type을 `multipart/form-data`로 인식하고, DTO의 각 필드를 개별 폼 데이터로 표시해준다.

 

 

HttpMediaTypeNotSupportedException 해결하기

 

 

Swagger UI의 동작 방식

• Swagger UI는 `multipart/form-data` 요청을 보낼 때, 각 `part`에 대해 개별적으로 Content-Type을 지정할 수 없다.
• 파일이 아닌 일반 필드를 보낼 때 자동으로 `application/json`으로 전송한다.

 

@RequestBody에서 @ModelAttribute으로 변경

• `@RequestBody`는 body 데이터 전체를 하나의 객체로 변환하는데, `multipart/form-data`는 여러 part의 조합이기 때문에 Spring이 multipart/form-data를 JSON처럼 파싱할 수 없다. ➡️ `HttpMediaTypeNotSupportedException: Content-Type 'multipart/form-data' is not supported` 발생.
• `@ModelAttribute`는 각 part를 읽어서 필드별로 하나씩 매핑해준다.

 

 

 

다시 API 실행해본 결과, 200 응답에 cloudinary 서버에 이미지 업로드도 성공했다. ✌🏻✨

 

 

 

참고 >

Swagger에서 MultipartFile과 DTO 한 번에 받는 @RequestPart 요청을 실행할 수 있도록 만들기