multiple 속성의 File input 을 업로드하려고 하니, 문제가 발생했다.
파일을 포함한 모든 데이터를 FormData를 통해 담아서 AJAX로 서버로 전송해주는데,
아무리 받으려고 해도, 전송되는 파일 리스트의 사이즈가 계속 0인 것이다.
문제가 되는 코드는 아래와 같다
<!--
##### JavaScript #####
-->
<!-- event -->
this.prcAdd = () => {
let formData = new FormData();
formData.append('file', $('#file')[0].files);
}
<!-- ajax -->
$.ajax({
type : "POST",
enctype : "multipart/form-data",
url : "/prcAdd",
cache : false,
contentType : false,
processData : false,
data : formData,
success : function(data){
console.log(data);
},
error : function(){
alert('에러');
}
});
<!--
##### Controller #####
-->
@ResponseBody
@RequestMapping(value = "/prcAdd", method = RequestMethod.POST)
public String prcAdd(MultipartHttpServletRequest multipartRequest){
List<MultipartFile> fileList = multipartRequest.getFiles("file");
System.out.println(fileList.size());
return fileList.size();
}
문제를 찾기 위해 아무리 생각을 해보아도 답은 두 가지 중 하나였다.
Javascript에서 formData에 담는 것이 잘못되었거나, Controller에서 fileList를 잘못 받아오는 것.
그래서 정확한 문제를 찾기 위해 구글링과 콘솔로그로 추적하기 시작했다.
우선 컨트롤러 코드가 이상없는지 확인을 위해, 다음을 확인하였다.
ⓐ multipartRequest.getFile로 단일 파일을 받아올 수 있는지 테스트
ⓑ multipartResolver가 있는지, 사이즈는 정상 설정되어있는지 확인
ⓒ 구글링을 통해 FileList를 getFiles로 받는 것이 맞는지 확인
확인 결과, 컨트롤러가 정상임을 알 수 있었다.
이후, Javascript 코드를 확인하였다.
ⓐ $('#file')[0].files 의 값이 맞는지 확인
ⓑ formData에 FileList형식으로 그대로 담아주면 되는지 확인
확인 결과, ⓑ에서 이상한 점을 발견할 수 있었다.
[ 해결 방법 ]
문제를 확인할 수 있었던 것은 구글링을 통해서였다.
multiple 속성 파일의 ajax 처리방법을 검색하고 있었는데, 이상하게도 검색결과 내용마다 FileList를 반복문을 통해 개별적으로 formData에 append하고 있었던 것이다.
그래서 확인 삼아, 자바스크립트 내장함수인 map과 Array.from을 통해 간결화한 테스트 코드를 작성하였다.
<!--
##### JavaScript #####
-->
<!-- event -->
this.prcAdd = () => {
let formData = new FormData();
Array.from($('#file')[0].files).map(e => formData.append('file', e));
}
결과를 확인해보니, 파일이 Controller로 정상적으로 넘어오는 것을 확인할 수 있었다!
🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱🏍
댓글