FormData에 대해 알아보자

lovjgb·2023년 9월 13일

FormData

FormData 란?

이미지 같은 멀티미디어 파일을 서버에 보낼 때 사용한다.
이터러블한 객체( = 반복가능한 객체)이다.
유연한 데이터 처리: HTML 폼 데이터뿐만 아니라, JavaScript에서 동적으로 데이터를 추가할 수 있음.
파일 데이터를 포함한 다양한 데이터 전송 가능.
MIME 타입 설정 불필요: Content-Type 헤더를 자동으로 설정 (multipart/form-data).
FormData 객체는 내부적으로 반복자를 사용해 데이터를 관리하기 때문에 console.log로 바로 데이터를 확인할 수 없다. 특정 메서드를 사용해야만 볼 수 있다.

생성자 및 메서드

생성자는 아래와 같다.

let formData = new FormData([form]);
formData.append(name, value) // value는 문자열로 들어간다.

메서드
- formData.append(key, value)
  데이터를 추가.
- formData.delete(key)
  특정 데이터를 삭제.
- formData.get(key)
  특정 키의 데이터를 가져옴.
- formData.has(key)
  특정 키가 존재하는지 확인. true, false 로 반환해준다.
- formData.set(key, value)
  특정 키에 데이터를 설정(기존 데이터 덮어쓰기).
- formData.getAll(key)
  특정 키에 해당하는 모든 값의 배열을 반환
```
console.log(formData.getAll('name'));
```
- formData.keys()
  FormData 객체의 모든 키를 반복 가능한 객체로 반환
```
for (const key of formData.keys()) {
console.log(key);
}
```
- formData.values()
  FormData 객체의 모든 키를 반복 가능한 객체로 반환
```
for (const value of formData.values()) {
console.log(value);
}
```
- formData.entries()
  모든 키-값 쌍을 Iterator 객체로 반환.
```
for (const [key, value] of formData.entries()) {
console.log(key, value);
}
```

사용법

HTML 사용법

파일의 경우, new FormData(form) 을 작성하게 되면, <form> 에 작성한 내용이 자동으로 FormData에 담겨지게 된다.

<form id="myForm">
<input type="text" name="username" value="JohnDoe">
<input type="file" name="profile">
</form>

<script>
const form = document.getElementById('myForm');
const formData = new FormData(form); // HTML 폼 데이터를 자동으로 수집

fetch('/submit', {
  method: 'POST',
  body: formData,
});
</script>

Javascript 사용법

HTML 폼 요소에서 FormData 생성

const formElement = document.querySelector('form');
const formData = new FormData(formElement); // 폼의 모든 데이터를 초기화

동적으로 추가

const formData = new FormData();
formData.append('username', 'Alice'); // 동적으로 필드 추가
formData.append('age', 25);

수정(덮어쓰기)

const formData = new FormData();
formData.append('username', 'Alice');
formData.set('username', 'Bob'); // 기존 값을 덮어씀

for (const [key, value] of formData.entries()) {
console.log(key, value);
}
// 출력: username Bob

삭제

const formData = new FormData();
formData.append('username', 'Alice');
formData.delete('username'); // 특정 키 삭제

multipart/form-data

HTML 폼에서 파일 업로드나 바이너리 데이터를 전송할 때 주로 사용되는 HTTP 요청의 인코딩 방식
HTTP 요청의 헤더에 Content-Type: multipart/form-data가 포함되며, 서버는 이를 통해 클라이언트가 데이터를 다중 파트로 전송하고 있음을 알 수 있게 된다.
텍스트 데이터는 그대로 전송되고, 이미지나 파일은 바이너리 데이터로 인코딩되어 본문에 포함된다. 서버는 이를 디코딩하여 처리한다.

전송된 HTTP 요청 예시

WebKitFormBoundary12345 를 boundary 값으로(multipart/form-data 형식에서 각 부분을 구분하는 구분자 역할) 가정했을 때, 아래와 같다.

POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary12345

------WebKitFormBoundary12345
Content-Disposition: form-data; name="username" 
  
Alice 
------WebKitFormBoundary12345
Content-Disposition: form-data; name="profilePic"; filename="photo.png"  
filename="photo.png"
Content-Type: image/png 

<파일의 바이너리 데이터가 위치하는 자리..>  
------WebKitFormBoundary12345--

위 내용을 해석해보면 아래 두가지 데이터임을 알 수 있다.