[에러 회고] Springboot 이미지 전송 post request 시 에러 (onsubmit)

사건 발단

 

환경 : springboot 2.7.4

          java ver 1.8

 

클라이언트에서 이미지 선택 후 전송 시 , 선택한 파일이 이미지 확장자인지, 용량은 허용 범위 내인지 유효성 검사를 위해

이미지 전송 form submit을 fetch 함수로 따로 구현하여 유효성을 검사하는 로직을 추가하였습니다.

이후 사진을 전송하니 업로드가 정상적으로 되는 경우가 있고 이미지를 받지 못하는 경우가 생겼습니다.

 

변경된 클라이언트 코드

onsubmit에 fetch 함수를 지정하였습니다.

<form id="upload-form" onsubmit="submitForm(event)" class="upload-form" >

 

마주한 에러

2023-05-30 11:22:21.022 ERROR 12172 --- [io-8080-exec-10] o.a.c.c.C.[.[.[/]
.[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] 
in context with path [] threw exception [Request processing failed; 
nested exception is org.springframework.web.multipart.MultipartException: 
Failed to parse multipart servlet request; nested exception is java.io.IOException: 
org.apache.tomcat.util.http.fileupload.impl.IOFileUploadException: 
Processing of multipart/form-data request failed. 
java.io.EOFException] with root cause

...

 

 

 

해결 방안

 

onsubmit으로 따로 fetch함수를 사용할 경우 submit을 시도할 때 submit 시 기본동작이 발생하여 form의 데이터가 사라집니다. 그래서 서버에서는 이미지 파일을 전달 받지 못하고 이러한 에러가 발생하였습니다.

간단하게  fetch 함수가 구현된 함수의 상단에 event.preventDefault() 함수를 추가함으로 해결이 됩니다.

해당 함수는 submit 시 기본동작을 방지합니다. 그렇기에 해당 함수를 추가하면 더 이상 form이 초기화 되지 않습니다.

그렇기에 따로 초기화 코드를 적용하여야 합니다.

 

function submitForm(event) {
    event.preventDefault(); // 폼 제출 기본 동작 막기

 

fetch 함수

fetch('post/upload', {
    method: 'POST',
    body: formData
})
    .then(function(response) {

        if (response.ok) {
            resetModalUploadForm();
        } else {
            alert('파일 업로드 실패!');
        }
    }) .catch(reason => {
        console.error(reason);
})

 

form 초기화 함수

function resetModalUploadForm() {
    document.getElementById('modal').style.display = "none";
    document.getElementById('preview-image').innerHTML = "";
    document.getElementById('file-info').innerHTML = "";
    document.getElementById('upload-form').reset();
}

 

 

들어주셔서 감사합니다.