👉🏻 FormData

FromData란 ajax로 폼 전송을 가능하게 해주는 FormData 객체이다.
보통은 Ajax로 폼(form 태그) 전송을 할 일이 거의 없다.
주로 JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전송한다.
하지만, form전송이 필요한 경우가 있는데, 이미지를 ajax로 업로드할 때 필요하다.
이미지는 base64, buffer, 2진 data 형식으로 서버로 전송해도 된다.

✍🏻 FormData 만들기

let formData = new FormData();
formData.append('name', 'zerocho');
formData.append('item', 'orange');
formData.append('item', 'melon');

new FormData()로 새로운 객체를 생성해준다. append 메소드로 key-value 형식으로 하나씩 추가한다. 같은 키를 가진 값을 여러 개 넣을 수도 있다. 덮어씌워지지 않고 추가된다.

formData.has('item'); // true
formData.has('money'); // false
formData.get('item'); // orange
formData.getAll('item'); // ['orange', 'melon']

has 메소드로는 해당하는 키가 존재하는 지 확인할 수 있다. get 메소드로 직접 가져올 수 있다. 유의할 점은 get은 처음 저장한 값 하나만 불러온다.

✍🏻 FormData 지우기

delete 메소드를 사용하면 된다. append와 비슷한 set 메소드가 있는데, set과 append의 차이점은 set도 추가를 해주기는 하지만, 기존 키가 있으면 그 값을 모두 덮어씌워버린다.

formData.delete('test');
formData.set('item', 'apple');

👉🏻 FlieReader

웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File혹은 Blob객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 한다.

✍🏻 FileReader.onload()

load 이벤트의 핸들러. 이 이벤트는 읽기 동작이 성공적으로 완료되었을 때마다 발생한다.
비동기이므로 원하는 동작을 위해 CALLBACK 함수를 이용하는 것이 좋다.

✍🏻 FileReader.readAsText(FILE, ENCODING)

파라미터 : 1. 읽을 객체, 2. 인코딩
특정 파일, Blob객체를 텍스트로 읽기 시작하며 두번째 파라미터로 읽을 때 사용되는 인코딩을 지정할 수 있다.

• 참고
  https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader