Javascript (자바스크립트) - FormData() 객체

FormData() 는 자바스크립트에서 HTML 폼 데이터를 쉽게 서버로 전송할 수 있게 해주는 내장 객체이다.

주로 파일 업로드 이미지 전송 등 multipart/form-data 방식이 필요한 상황에서 사용된다.

 

1. 기본 문법

new FormData()로 form 객체를 생성한다.

 

그리고 몇 가지 메소드를 사용해서 FormData를 다룰 수 있다.

• append(key, value) : 데이터 추가
• set(key, value) : 기존 키가 있으면 덮어쓰고 없으면 새로 추가
• get(key) : key에 해당하는 첫 번째 값을 가져옴
• getAll(key) : key에 해당하는 모든 값을 배열로 가져옴
• delete(key) : 해당 key값의 필드를 삭제 (키, 밸류 모두 제거)
• has(key) : 해당 key값이 존재하는지를 확인

const form = new FormData();

// append
form.append('file', testData);	// file 이라는 key를 가지고 testData를 가진 데이터를 추가

// set
form.set('file', testData2);	// file 이라는 key가 있으므로 file에 testData2 밸류로 덮어씀

// get
form.get('file');	// file 이라는 key의 value를 반환

// getAll
form.append('username', 'Chris');
form.append('username', 'Bob');
form.getAll('username'); // Returns ["Chris", "Bob"] - username이라는 key를 가진 모든 value를 배열로 반환

//delete
form.get('file');	// file 이라는 key를 가진 필드를 제거

// has
form.has('file'); 	// file 이라는 key를 가졌는지 여부 확인 (file을 delete 했기 때문에 false 반환)

 

2. 전송

fetch나 XMLHttpRequest 의 요청 바디에 FormData 객체를 넣으면 브라우저는 자동으로 적절한 Content-Type 헤더(multipart/form-data)를 지정하여 전송한다.

 

파일이나 이미지 업로드 등을 바이너리 데이터 전송한다.

 

바이너리 데이터
0과 1로 이루어진 이진수 데이터로 이미지, 오디오, 동영상 등 데이터를 바이너리 형태로 저장. 전송시 base64로 인코딩해서 사용

 

 

 

---

참고

https://ko.javascript.info/formdata

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api