[Spring Boot] Content type 'application/octet-stream' not supported

Hayden·2024년 6월 11일

html에서 이미지 데이터를 서버에 전송 시 오류 발생

오류 메시지

Spring :
.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/octet-stream' not supported]

JS : 415 (Unsupported Media Type)

   @ResponseBody
   @PostMapping("/room/update/option-image")
   public void roomOptionImageUpdatePost(@RequestPart("optionImage") MultipartFile optionImage,
                                     @RequestPart("optionImageNo") Long optionImageNo) {
       log.info("optionImage {}", optionImage);
       log.info("optionImageNo {}", optionImageNo);
   }
   // 이미지를 클릭했을 때 동작, 이미지 업데이트 함수
   function optionImageClickUpdateImage() {

       const image = $('.option-image');

       //이미지 클릭시 click 트리거 작동
       image.click(function() {
           $(this).siblings('.option-image-input').trigger('click');
       });

       // input에 이미지 값이 들어왔을 때 즉시 ajax post 동작
       $('.option-image-input').on('change', function() {
           const optionImageNo = $(this).siblings('.option-image').data('roption-image-no');

           console.log("optionImageNo", optionImageNo);

           let optionImageData = new FormData();

           const image = this.files[0];

           if (image) {
               optionImageData.append('optionImage', image);
           }
           optionImageData.append('optionImageNo', optionImageNo);

           console.log(optionImageData.get('optionImage'));

           const clickedImage = $(this).siblings('.option-image');


           if (image) {
               let render = new FileReader();
               render.onload = function(e) {
                   clickedImage.attr('src', e.target.result);
               };
               render.readAsDataURL(image);
           }

           $.ajax({
               type: "post",
               url: "/seller/room/update/option-image",
               dataType: "html",
               data: optionImageData,
               contentType: false,
               processData: false,
               success: function(result) {
                   console.log("Image upload success");
               },
               error: function(request, status, error) {
                   console.log("Error uploading image: " + error);
               }
           });
       });
   }

오류 해결

데이터 방식을 multipart/form-data형식으로 보내야 하기 때문에 formData 객체를 사용해서 데이터를 서버로 전송해야 한다.
html에서 ajax로 보낸 데이터를 서버에서 받기 위해서는 @RequestPart, @RequestParam을 사용해서 전달 받아야 한다.

Multipart형식의 데이터 외 String, Long과 같은 형식의 데이터를 서버에 전송받기 위해서는 @RequestParam으로 서버에 전달 받아야
415 Unsupported Media Type(지원되지 않는 미디어) 오류가 발생하지 않는다.

	@RequestPart("optionImageNo") Long optionImageNo -> @RequestParam("optionImageNo") Long optionImageNo
profile
백엔드 공부

0개의 댓글