formData.append 활용해서 이미지 업로드 하기

참고한 자료 : https://developer.mozilla.org/ko/docs/Web/API/FormData/append

1. newReview라는 state내에 데이터베이스로 전송하고 싶은 데이터들을 담아준다.

const [newReview, setNewReview] = useState({ comment: '', image: '' });

2. onChange event를 통하여 comment, image 각각 저장

🔖참고 : 업로드하는 형태가 이미지일 경우 저장형태는 e.target.files[0]

ex)

   <input
            type="file"
            accept="image/*"
            onChange={e => {
              setNewReview({ ...newReview, image: e.target.files[0] });
            }}
          />

3. 위에서 저장한 state를 formData에 append해준다.

 const formData = new FormData();
 formData.append('content', newReview.comment);
 formData.append('review_image', newReview.image)

4. fetch(method : 'POST')활용하여 formData를 body에 담아 전송해준다.

    fetch(`${BASE_URL}/reviews/lecture/${id}`, {
      method: 'POST',
      headers: {
        Authorization: getToken(),
      },
      body: formData,
    }).then(res => {
      if (res.ok) {
        alert('등록이 완료되었습니다.');

        getReviewData();
      }
    });
  };

위의 코드 아래 한꺼번에 정리

const [newReview, setNewReview] = useState({ comment: '', image: '' });
  
   const uploadReview = e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('content', newReview.comment);
    formData.append('review_image', newReview.image);

    fetch(`${BASE_URL}/reviews/lecture/${id}`, {
      method: 'POST',
      headers: {
        Authorization: getToken(),
      },
      body: formData,
    }).then(res => {
      if (res.ok) {
        alert('등록이 완료되었습니다.');

        getReviewData();
      }
    });
  };
  
  
 return //관련없는 부분 생략
<Form onSubmit={uploadReview}>
       <div>
         <textarea
           className="contents"
            type="text"
            placeholder="리뷰 내용을 입력해주세요"
            onChange={e =>
             setNewReview({ ...newReview, comment: e.target.value })
              }
            />
         <ReviewButton>
           <button>작성하기</button>
            </ReviewButton>
       </div>
          <input
            type="file"
            accept="image/*"
            onChange={e => {
              setNewReview({ ...newReview, image: e.target.files[0] });
            }}
          />
        </Form>

🍯 마무리

신기한 백엔드의 세계! 데이터 전송하고 이미지 업로드 되는 거 너무 신기해!!