FormData_JavaScript

정의

• 폼을 쉽게 보내도록 도와주는 객체
• FormData 객체는 HTML 폼 데이터를 나타낸다
• fetch 등의 네트워크 메서드가 FormData 객체를 바디로 받는다는 건 FormData의 특징이다. 이때 브라우저가 보내는 HTTP 메시지는 인코딩되고 Content-Type 속성은 multipart/form-data로 지정된 후 전송된다.
• 서버 관점에선 FormData를 사용한 방식과 일반 폼 전송 방식에 차이가 없다

메서드

• formData.append(name, value) – name과 value를 가진 폼 필드를 추가
• formData.append(name, blob, fileName) – 형태의 필드를 추가. 세 번째 인수 fileName은 (필드 이름이 아니고) 사용자가 해당 이름을 가진 파일을 폼에 추가한 것처럼 설정해줌
• formData.delete(name) – name에 해당하는 필드를 삭제
• formData.get(name) – name에 해당하는 필드의 값을 가져옴
• formData.has(name) – name에 해당하는 필드가 있으면 true를, 그렇지 않으면 false를 반환
• 폼은 이름(name)이 같은 필드 여러 개를 허용하기 때문에 append 메서드를 여러 번 호출해 이름이 같은 필드를 계속 추가해도 문제가 없다.

사용

const formData = new FormData([form]);

• 반복 작업

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// key/value 쌍이 담긴 리스트
for(let [name, value] of formData) {
  alert(`${name} = ${value}`); // key1 = value1, then key2 = value2
}

• 파일이 있는 폼 전송

const formDataHandle = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };

return(
  <form id='formElem'>
  	<input type="file" name="picture" accept="image/*">
  </form>

• blob 데이터가 있는 폼 전송

async function submit() {
      let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));

      let formData = new FormData();
      formData.append("firstName", "Bora");
      formData.append("image", imageBlob, "image.png");

      let response = await fetch('/article/formdata/post/image-form', {
        method: 'POST',
        body: formData
      });
      let result = await response.json();
      alert(result.message);
    }

참고 레퍼런스