FormData 사용법 & 개념

🤷‍♂️ FormData란?

---

FormData 알아보기 앞서 먼저 파일이나 이미지를 서버에 전송하는 경우에 중요한 개념인 multipart/form-data 알아야한다.

multipart/form-data 간략한 정리: 
http 메시지에 Content-Type 속성이 multipart/form-data로 지정되고 정해진 형식에 따라 메시지를 인코딩하여 전송한다. 
즉 이미지, 파일 등이 png,  jpg 파일 자체가 전송되는 것이 아니고 인코딩된 데이터로 전송된다. 

---

이미지, 파일 등을 서버로 보내줄때 FormData 객체가 많이 사용이 된다. 

 

// FormData 기본 문법
// 자바스크립트로 직접 form 태그를 생성

let formData = new FormData(); // 새로운 폼 객체 생성
formData.append('name','yoo'); // 폼 데이터를 스크립트로 추가
formData.append('age','29'); // <input name="item" value="29"> 와 같다.
formData.append('hobby','soccer'); // <input name="item" value="soccer">

 

위처럼 FormData 객체에 append() 메소드로 key와 value 값을 차례로 추가해주면 input 태그에 값을 입력하는 것과 같은 효과를 가진다. 

 

 

개발하면서 알아두면 좋은 FormData 메소드만 정리해봤다.

 

formData.append(name, value)
// - form의 name 과 value 를 필드의 추가
// - input의 name 속성과 value 입력값 역할을 한다고 생각 하면 된다.
 
formData.append(name, blob, fileName)
// - input 의 type 이 'file' 인 경우에 사용
// - fileName은 file의 이름의 해당

formData.has(name)
// - 주어진 name 의 해당하는 필드가 있을 경우 true, 없으면 false를 반환

formData.get(name)
// - 주어진 name 의 해당 하는 필드 value를 반환

formData.delete(name)
// - 주어진 name 으로 필드를 제거

 

FormData경우 특수한 객체 형태이기 때문에 console.log혹은 FormData 속성에서 확인이 불가능하다. 

확인이 필요한 경우에 for문 순회를 해서 FormData에 형태를 확인할 수 있다. 

 

let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
 
// 폼 객체 key 값을 순회.
let keys = formData.keys();
for (const pair of keys) {
    console.log(pair); 
}
 
// 폼 객체 values 값을 순회.
let values = formData.values();
for (const pair of values) {
    console.log(pair); 
}
 
// 폼 객체 key 와 value 값을 순회.
let entries = formData.entries();
for (const pair of entries) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

 

실제 제가 사용한 FormData를 활용해서 서버에 전송할때 사용한 예제 코드 입니다.

# multipart/form-data 클라이언트 데이터 형태 구성

const data = new FormData();
    data.append('img', images[0]);
    data.append('type', 'board');
    data.append('service', 'premium');
 
const result = await axios({
    method: 'post',
    url: '/papi/file/upload',
    data: data ,
    headers: {
      'Content-Type': `multipart/form-data`,
    },
 });