ajax formData file upload 시 MultipartFile 로 못받는 이유

ajax formData file upload 시 MultipartFile 로 못받는 이유

 

보통 프론트엔드에서 ajax를 활용해 파일을 서버로 보낼 때는 FormData를 활용합니다.

formData 에 파일을 append 하거나 해당 form을 그대로 POST Method로 전송하죠.

const formData = new FormData();
const files = document.querySelector("#files").files;
for(let file of files){
    formData.append("files", file);
}

 

서버에서는 다양한 방식으로 MultipartFile을 받게됩니다.

 

@PostMapping("/upload.do")
public String uploadFile(@RequestParam ArrayList<MultipartFile> files) throws IOException {
    
}

@PostMapping("/upload.do")
public String uploadFile(@RequestPart("files") ArrayList<MultipartFile> files) throws IOException{
    
}

@PostMapping("/upload.do")
public String uploadFile(MultipartHttpServletRequest request) throws IOException {
    
}

 

그런데 업로드 시 아래와 같은 Exception이 발생할 때가 있습니다.

 

1.

org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

 

2.

org.springframework.web.multipart.MultipartException: Current request is not a multipart request

 

1의 에러는 multipart boundary 를 찾을 수 없다.

2의 에러는 현재 요청은 multipart 요청이 아니다 라는 Exception입니다.

 

왜 위와 같은 Exception이 발생을 할까요?

원인은 Request Header의 Content-Type에 있습니다.

 

form을 전송한다고 해서 ajax header에 Content-Type을 

multipart/form-data로 설정하면 1번의 Exception이,

application/x-www-form-urlencoded 로 설정하면 2번의 Exception이 발생하게 됩니다.

 

각각의 차이를 보겠습니다.

정상동작할 때의 Content-Type입니다. (Content-Type을 설정하지 않은 경우)

 

 

Content-Type을 multipart/form-data 로 설정할 경우

 

 

application/x-www-form-urlencoded 로 설정할 경우

 

 

위의 차이점을 보셨나요?

결론적으로 FormData에 파일을 전송할 때는 Content-Type을 설정하면 안됩니다.

FormData에 파일이 있을 경우 브라우저에서 자동으로 boundary를 붙여주게 되는데, 

ajax 전송 시 설정하면 Override되어 boundary가 사라지게 됩니다. (no multipart boundary was found 발생) 

Content-Type을 잘못 설정하게 되면 multipart request가 아닌게 되구요. (application/x-www-form-urlencoded로 설정한 경우)

 

boundary는 body 데이터에 포함되어 있는 파일데이터 구분자를 의미합니다.

파일에 대한 구분자가 없으니 파일데이터를 받는 컨트롤러에서 요청을 거부하는 것입니다.

주의해서 사용하도록 합시다.