사진 포함한 데이터 전송하기 FormData()

위코드 1차 팀프로젝트를 진행하며 정리한 내용입니다.

회원가입시 사진을 포함한 정보를 보낼 때는 FormData 를 활용하면 각 데이터를 일괄 전송할 수 있습니다. 이 때 각 입력창 input 태그의 name 을 백엔드에서 데이터를 받는 key 값과 일치 시켜야 하고, content-Type 은 multipart/form-data 를 적용합니다. 여기서 html 폼 전송으로 일어나는 POST 요청에서는 content-Type 이

요소의 enctype 속성에 지정되어서 아래에서는 content-Type 이 아닌 enctype 에 해당 값을 바로 넣었습니다.

순서대로 코드를 살펴보면, 해당 값을 입력받는 Input 태그(전체를 form 태그로 감싼)
의 naem 값을 api 로 통신하는 데이터의 key 값과 일치 시킵니다. (body 에 별도 키값 설정이 필요게 하기 위해)

<input
  onChange={handleInput}
  className="userInputPw input"
  name="pw"
  name="password" // 여기 네임!
  type="password"
  placeholder="비밀번호"
  autoComplete="current-password"
/>;

가입하기를 클릭할 때 실행하는 함수에서 폼데이터를 만들어 사용합니다. 아래 코드에서는 form 태그의 id 값으로 선택한 signUpForm 을 new FormData() 에 담아 객체로 만들어 줍니다. (form 데이터안의 모든 입력값을 객체로 담는) 이때 특정 값을 추가하거나 지우고 싶다면 해당 메소드를 사용해야 합니다. 아래에서는 append 로 특정값을 추가합니다.

const checkSignUp = e => {
  e.preventDefault();

  const signUpForm = document.getElementById('signUpBox');
  const formData = new FormData(signUpForm);
  formData.append('birthday', `${year}-${month}-${day}`);

생성한 폼 데이터를 확인하고 싶다면 아래와 같이 반복문을 추가합니다.

const checkSignUp = e => {
  e.preventDefault();

  const signUpForm = document.getElementById('signUpBox');
  const formData = new FormData(signUpForm);
  formData.append('birthday', `${year}-${month}-${day}`);

  for (let key of formData.keys()) {
    console.log(key, ':', formData.get(key));
  }

데이터를 보내는 fetch 함수까지 마저 작성하면 아래와 같습니다.

const checkSignUp = e => {
  e.preventDefault();

  const signUpForm = document.getElementById('signUpBox'); // id 값으로 선택하고
  const formData = new FormData(signUpForm); // 폼데이터 생성
  formData.append('birthday', `${year}-${month}-${day}`); // 별도 값 있다면 지정, 빼거나 수정하는 방법은 다른 메서도 확인

  for (let key of formData.keys()) { // 포문으로 폼데이터 확인 가능
    console.log(key, ':', formData.get(key)); 
  }

  fetch('https://8075-211-106-114-186.jp.ngrok.io/users/signup', {
      method: 'POST',
      headers: {
        enctype: 'multipart/form-data', // 파일 형식 확인
      },
      body: formData, // 폼데이터로 일괄 전송
    })
      .then(response => {
        if (response.ok === true) {
          return response.json();
        }
        throw new Error('에러 발생!');
      })
      .catch(error => alert(error))
      .then(data => {
        if (data.ok === '회원가입 성공') {
          alert('회원가입 성공');
          <Link to="/login" />;
        } else {
          alert('회원가입 실패');
        }
      });
  };