FormData 사용하기

Form Submit하는건 프론트엔드 하면서 많이 하는 일 중에 하나일 것이다.

일단 Form Submit하는 방식은 여러가지가 있는데 내가 아는 것만 적자면...

1. form태그 안에 submit 버튼을 이용한 방식
2. 스크립트를 이용한 form.submit()
3. 비동기 통신을 이용한 submit 방식

 

그 외 등등 다양한 방식으로 form submit을 할 수 있다.

내가 짜는 코드에 맞게 적절한 방식으로 사용하면된다.

1번과 2번 케이스 경우에는 알아서 name과 value값을 백단으로 넘겨주지만

비동기 통신을 이용했을 때는 내가 직접 데이터를 말아서(?) 보내줘야한다.

 

어떻게 데이터를 말아서 보내야할까?

그것도 다양한 방식이 있지만 오늘은 FormData를 이용해서 데이터를 말아보겠다.

FormData 만들기

const formData = new FormData();

 

formData는 new 키워드를 이용해 만들어 줘야한다.

formData는 1개의 파라미터를 가진다. (optional)

<form name="frm" method="POST">
	<input type="text" name="name" />
</form>

위에 form 태그를 먼저 찾아야한다.

// 폼요소 찾는 2가지 방법
// 1. document.forms.[form이름];
const form = document.forms.frm
// 2. querySelector
const form2 = document.querySelector('[name=[form이름]]');

const formData = new FormData(form);

form 요소를 파라미터로 넣게 되면 해당 폼 요소의 필드 전체가 자동 반영된다.

---

FormData 메서드 (append)

// formData.append(key, value);

formData.append('age', 0);
formData.append('name', 'jane');

name(key)과 value를 가진 폼 필드를 추가해준다.

2-1. 파일을 append 하는방법 (파일이 1개일 때)

<input type="file" name="file" />

const fileData = document.querySelector('[name=file]').files[0];

formData.append('file', fileData);

file input의 files 속성의 array에서 [0]값을 폼 필드에 추가해준다.

2-2. 파일 여러개를 append 하는 방법 (multiple)

<input type="file" name="files" multiple />

const fileData = document.querySelector('[name=file]').files;

for (let i = 0; i < fileData.length; i++) {
    formData.append('files', fileData[i]);
}

 

---

FormData 쿼리 스트링으로 만드는 방법

const formData = new FormData();
formData.appent('test', 'test');

const queryString = new URLSearchParams(formData).toString();

URLSearchParams와 toString api를 사용하면 formData도 쿼리스트링으로 바꿀 수 있다.

---

FormData 출력하기

const formData = new FormData();

console.log(formData); // 출력 할 수 없음 FormData {}

for (var pair of formData.entries()) {
  console.log(pair[0] + ", " + pair[1]);
}

// 구조분해할당 이용하기
for (var [key, value] of formData.entries()) {
  console.log(key + ", " + value);
}

---

Object → FomData로 바꾸기

const person = {
	name : '홍길동',
    age : '21'
}

const formData = new FormData();
Object.entries(person).forEach(([key, value]) => {
	formData.append(key, value);
})

---

FomData → Object로 바꾸기

// formData

const object = {};

formData.forEach((value, key) => {
	object[key] = value
})

 

 

---

📌 참고자료

FormData 객체