[Spring] Controller에서 MultipartFile로 파일 받기 (다른 값들과 함께 받는 방법)

FE: Nuxt(Vue)

FE에서 등록할 때 등록할 값들과 사진이 함께 전달됨 (multipart/form-data)

(this.$axios.post(
('https://'),
formData,
{
  withCredentials: true,
  headers: {
    'Content-Type': 'multipart/form-data',
    Authorization: // token
  }
}
)
).then(res => {
}).catch((error) => {
window.alert(error.response.data.message)
})

 

formData 만드는 법

const formData = new FormData()

formData.append(key, value)

 

** 사진을 여러장 보낼 때

this.files.map((file) => {
    formData.append('image', file)
})

 

BE: Spring

 

Controller에서 FormData를 RequestBody로 받을 수 없다. RequestBody는 String만 처리 가능하기 때문

1. RequestPart 사용

2. ModelAttribute 사용

 

RequestPart

    @PostMapping(value = "/test")
    public ResponseEntity register(@RequestPart Params params,
                                   @RequestPart MultipartFile images) {
        return ResponseEntity.status(HttpStatus.OK).body(1);
    }

public class Params {
    String name;
    Integer price;
}

 

 

ModelAttribute

    @PostMapping(value = "/test")
    public ResponseEntity register(@ModelAttribute Params params) {
        return ResponseEntity.status(HttpStatus.OK).body(1);
    }

public class Params {
    String name;
    Integer price;
    MultipartFile image;
}

 

 

참고

https://gaemi606.tistory.com/entry/Spring-Boot-multipartform-data-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-React-Axios-REST-API

https://minholee93.tistory.com/entry/Spring-Json-with-MultipartFile