json, formData 로 파일첨부

1개 첨부시인경우임.

function saveImg(){
var imgSend = {
imgSendAjaxCall : function () {
var data = {
       userId: $('#imgSendId').val(),
};
var form =$('#fileForm')[0];
var formData = new FormData(form);
console.log($('#fileBody')[0].files[0]);
formData.append('file', $('#fileBody')[0].files[0]);
formData.append('key', new Blob([JSON.stringify(data)] , {type: "application/json"}));

$.ajax({
            type: 'POST',
            url: 'http://localhost:8080/app'+'/dashboard/sendImg.json',
            processData: false,
            contentType:false,
            data: formData,
        }).done(function() {
            alert('사진이 전송되었습니다.');
            window.location.href = '/dashboard/home.do';
        }).fail(function (error) {
            alert(JSON.stringify(error));
});
    }
    
};

    imgSend.imgSendAjaxCall();
}

 

 

중요

1.processData는 일반적으로 서버에 전달되는 데이터는 query String 형태로 전달됩니다. data파라미터로 전달된 데이터는 jQuery내부적으로 query string으로 만드는데, 파일전송에는 이를 피해야함으로 false설정해줍니다.

2.contentType은 default값이 "application/x-www-form=urlencoded; charset=UTF-8"인데 파일을 보내줄때는 multipart/form-data로 전송해야하기때문에 false로 설정해줍니다. 파일을전송하고 디버깅모드로 체크해보면 Content-Type:multipart/form-data로 나오는걸 볼수있습니다.

 

컨트롤러@PostMapping("sendImg.json")
public Long sendImg(@RequestPart(value = "key") ImgDto imgDto,
@RequestPart(value = "file") MultipartFile file) {

System.out.println(imgDto.toString());
System.out.println(file.getOriginalFilename());

return null; //임시코드
  
  }

 

 

 

참고

이미지 관리는 물리적으로 이미지를 서버에 업로드 한 다음 파일 위치와 이미지 세부 정보를 데이터베이스에 기록하는 방법으로 가장 잘 수행 할 수 있습니다. 그 후 사용자가 텍스트 검색, 부품 번호 검색 또는 기타 쿼리를 수행 할 수 있도록 검색 양식을 구성 할 수 있습니다.

BLOB 필드에 이미지를 업로드하는 것은 이미지가 썸네일보다 훨씬 큰 경우 일반적으로 이러한 이미지 데이터가 문제가되는 나쁜 생각입니다.