221220 formdata

FormData란 ajax로 폼 전송을 가능하게 해주는 Form객체입니다.

보통은 ajax로 form을 전송할 일이 거의 없고 JSON구조로 데이터를 전송합니다.

 

하지만 이미지를 ajax로 업로드할 때 form전송을 필요로 합니다. 물론 base64, buffer, 2진data형식으로 서버로 전송해도됩니다.

 

 

<input type="file" />

보통 form을 제추랗면 action 속성에 의해 지정한 페이지로 이동하면서 데이터를 전송합니다.

ajax는 반대로 제출버튼을 누르면 기본 폼 동작은 e.preventDefault()로 멈추고 페이지 전환 없이 데이터를 전송합니다.

 

페이지 전환 없이 폼 데이터를 제출하고 싶을 때 바로 FormData객체를 사용합니다.

 

FormData객체는 window.FormData에 위치합니다.

//payload로 갈 formData
  const formData = new FormData();
  
//전달할 객체 생성
  formData.append('category', time);
  formData.append('title', foodName);
  formData.append('content', foodDesc);
  formData.append('thumbnail', imgFile);
  // 데이터 전달 명령 필요
  dispatch(__postFood(formData));

위와같이 FormData()를 새롭게 만들어주고 그 formdata에 키와 밸류값을 append해준 뒤, dispatch에 실어준 모습입니다.

 

FormData에는 has(), get(), getAll()메소드를 사용할 수 있습니다.

//payload로 갈 formData
  const formData = new FormData();
  
//전달할 객체 생성
  formData.append('category', time);
  formData.append('title', '자기소개');
  formData.append('title', '안녕하세요');
  formData.append('content', foodDesc);
  formData.append('thumbnail', imgFile);
  //데이터를 추가 할 때는 같은 key를 가진 값을 여러개 넣을 수 있습니다.
  //덮어쓰지않고 추가되며 값은 문자열로 자동변환됩니다.
  //숫자를 넣어도 문자열이되고,
  //배열을 넣어도 콤마로 구분된 문자열이됩니다.
  //!!!!!!!!!!객체를 넣으면 무시됩니다.!!!!!!!!!!!!!!
  
// 데이터 전달 명령 필요
  dispatch(__postFood(formData));
  
//데이터 확인
formData.has('category')	//true
formData.has('age')	//false

//데이터 한개만 반환
formData.get('title')	//'자기소개'
//get은 처음 저장한 값 하나만 불러옵니다.

//데이터 모두 반환
formData.getAll('title')	//['자기소개','안녕하세요']
//getAll은 해당 key에 매칭되는 value값을 모두 배열로 반환합니다.

  키, 밸류, 혹은 둘다 불러올 수 도 있습니다.

//payload로 갈 formData
  const formData = new FormData();
  
//전달할 객체 생성
  formData.append('category', time);
  formData.append('title', '자기소개');
  formData.append('title', '안녕하세요');
  formData.append('content', foodDesc);
  formData.append('thumbnail', imgFile);
  //데이터를 추가 할 때는 같은 key를 가진 값을 여러개 넣을 수 있습니다.
  //덮어쓰지않고 추가되며 값은 문자열로 자동변환됩니다.
  //숫자를 넣어도 문자열이되고,
  //배열을 넣어도 콤마로 구분된 문자열이됩니다.
  //!!!!!!!!!!객체를 넣으면 무시됩니다.!!!!!!!!!!!!!!

//formData의 키값 모두 가져오기
let keys = formData.keys();
keys.next();	//{done:false, value:'category'}
keys.next();	//{done:false, value:'title'}
keys.next();	//{done:false, value:'title'}
keys.next();	//{done:false, value:'content'}
keys.next();	//{done:false, value:'thumbnail'}
keys.next();	//{done:true, value:'undefined'}

//formData의 밸류값 모두 가져오기
let values = formData.values();
values.next();	//{done:false, value:'time'}
values.next();	//{done:false, value:'자기소개'}
values.next();	//{done:false, value:'안녕하세요'}
values.next();	//{done:false, value:'foodDesc'}
values.next();	//{done:false, value:'imgFile'}
values.next();	//{done:true, value:'undefined'}

//formData의 엔드리들 모두 가져오기
let entries = formData.entries();
entries.next()	//{done:false, value=['category', 'time']}
entries.next()	//{done:false, value=['title', '자기소개']}
entries.next()	//{done:false, value=['title', '안녕하세요']}
entries.next()	//{done:false, value=['content', 'foodDesc']}
entries.next()	//{done:false, value=['thumbnail', 'imgFile']}
entries.next()	//{done:true, value=undefined}

이렇게 가져온 값들을 for문을 사용하여 모두 쉽게 보여줄 수 있습니다.

 

 

//payload로 갈 formData
  const formData = new FormData();
  
  formData.append( 'test', ['hi','hyemin'] );
  formData.get('test'); // hi,hyemin

  formData.delete('test');

  formData.get('test'); // null값이 들어갑니다.
  formData.set('item','test2');
  formData.getAll('item); // ['test2']

append와 비슷한 set메소드는 같은 추가이지만 기존 동일한 key가 있으면 그 값을 덮어씌웁니다.

append는 추가하기지만 set은 덮어씌우기

 

 

 

 

 

 

 

 

 

[JavaScript]Form Data란?