파일 서버로 전송하기 formData

파일을 서버로 전송하기 위해서는 formData를 활용합니다. 그렇다면, formData는 무엇일까요? MDN에서는 다음과 같이 설명하고 있습니다.

The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.send() or navigator.sendBeacon() methods. It uses the same format a form would use if the encoding type were set to "multipart/form-data".

FormData 인터페이스는 form 필드와 그 값을 나타내는 일련의 key/value 쌍을 쉽게 생성할 수 있는 방법을 제공합니다. 또한 XMLHttpRequest.send() (en-US) 메서드를 사용하여 쉽게 전송할 수 있습니다. 인코딩 타입이 "multipart/form-data"로 설정된 경우, form에서 사용하는 것과 동일한 포맷을 사용해야 합니다.

즉 formData는 HTML form 필드의 값을 key와 value의 형태로 서버로 전송할 때 사용합니다. 기본적인 예시는 다음과 같습니다.

<form id="formElem">
  <input type="text" name="name" value="Bora">
  <input type="text" name="surname" value="Lee">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = 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);
  };
</script>

formData 메서드

formData.append(name, value) – name과 value를 가진 폼 필드를 추가
formData.append(name, blob, fileName) – <input type="file">형태의 필드를 추가. 세 번째 인수 fileName은 (필드 이름이 아니고) 사용자가 해당 이름을 가진 파일을 폼에 추가한 것처럼 설정해줌
formData.delete(name) – name에 해당하는 필드를 삭제
formData.get(name) – name에 해당하는 필드의 값을 가져옴
formData.has(name) – name에 해당하는 필드가 있으면 true를, 그렇지 않으면 false를 반환

fileReader

FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.
즉 FileReader 를 활용해서 웹 애플리케이션에서 사용자가 이미지 파일 변경 사항을 실시간으로 확인할 수 있게 해줍니다. 프로젝트에서 유저의 프로필 설정 및 프로필 변경에서 formData와 병합하여 사용하였습니다.

fileReader 속성

FileReader.error 읽기 전용

DOMException 파일을 읽는 도중에 발생한 에러를 나타냅니다.
FileReader.readyState 읽기 전용

FileReader의 상태를 나타내는 숫자입니다. • EMPTY : 0 : 아직 데이터가 로드 되지 않았음. • LOADING : 1 : 데이터가 로딩 중. • DONE : 2 : 모든 읽기 요청이 완료됨.