[Spring Boot] FormData 로 form에 있는 데이터 전송하기

FormData

FormData 객체는 폼의 모든 입력 요소 값을 자동으로 수집해준다.

그래서 FormData 객체를 사용하면 복잡한 작어 없이 데이터를 전송할 수 있다.

사용방법
var formData = new FormData($('form')[0];

위처럼 작성해주고 확인을 원한다면 comsole 로 출력해보면 된다!

특징

• 텍스트 뿐만 아니라 파일도 함께 전송이 가능하다.
• multiple 속성이 있는 파일도 함께 포함된다.

FormData로 파일 업로드를 할 경우

function save() {
    // FormData 객체 생성
    var formData = new FormData($('form')[0]);

    $.ajax({
        url: '/your-server-endpoint', // 데이터를 보낼 서버 URL
        type: 'POST',
        data: formData,
        processData: false, // 파일 업로드 시 필요
        contentType: false, // 파일 업로드 시 필요
        enctype: 'multipart/form-data', // 폼 전송을 멀티파트 형식으로 지정
        success: function(response) {
            alert('글이 성공적으로 저장되었습니다.');
        },
        error: function(error) {
            alert('오류가 발생했습니다.');
            console.log(error);
        }
    });
}

• enctype 설정 필요

• data 는 formData (FormData 객체)

• processData : jQuery가 데이터를 어떻게 처리할지를 결정하는 옵션으로 기본값이 true 이다.
  ▶ FormData 개게로 전송할 때에는 데이터를 변환하지 않고 그대로 전송해야 하기 때문에 false로 설정
  ▶ false 로 해야 파일 전송이 제대로 이루어진다.

• contentType : 서버로 데이터를 보낼 때의 Content-Type 헤더를 결정하는 옵션
  ▶ 기본값 : 'application/x-www-form-urlencoded; charset=UTF-8' (기본적으로 폼 데이터를 URL 인코딩 방식으로 전송)
  ▶ FormData 객체를 사용할 때 jQuery 는 multipart/form-data로 자동 설정된다. 하지만 명시적으로 contentType 를 false 로 설정해야함 jQuery가 FormData 의 데이터 형식에 맞춰 설정한다.

---