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