FormData 객체

FormData 객체는 자바스크립트에서 지원하는 내장 객체이다.

HTML 폼 데이터를 쉽게 구성하고 전송할 수 있게 해주는 인터페이스다.

 

주로 파일 업로드를 할 때 사용한다.

 

주요 메서드:

• append(name, value): 새로운 값을 추가
• delete(name): 지정된 키의 값을 삭제
• get(name): 지정된 키의 첫 번째 값을 반환
• getAll(name): 지정된 키의 모든 값을 배열로 반환
• has(name): 지정된 키가 존재하는지 확인
• set(name, value): 새로운 값을 설정

다음은 예시다.

const formData = new FormData();

this.uploadedImages.forEach(file => {

formData.append('photos', file);

});

 

여러 이미지 파일을 서버로 전송하기 위해 사용한다.

각 파일을 'photos'라는 키로 FormData에 추가한다.

이를 통해 여러 파일을 하나의 요청으로 전송할 수 있다!

그리고 자동으로 'multipart/form-data' 인코딩을 처리한다.

 

자동으로 'multipart/form-data' 인코딩을 처리하는게 좋은 이유는

개발자가 복잡한 multipart 요청 형식을 직접 구현할 필요가 없고,

헤더, 경계(boundary) 설정 등의 세부사항을 신경 쓰지 않아도 된다.

크로스 브라우저 호환성도 보장해준다.

보안쪽으로는 XSS(Cross-Site Scripting)와 같은 공격 가능성도 낮춰준다.