[TIL] 여러장의 이미지 POST 요청(FormData)

Trouble

 

이미지를 서버에 전송하는 것에 대한 고민
형식(url, 파일)에 대한 고민
여러장의 이미지를 전달하는 방법에 대한 고민
이미지와 다른 post data를 함께 보내는 방법에 대한 고민

 

 

Solution

 

이미지 요청:
url이 아닌 파일 자체를 배열로 FormData에 append 후 서버에 전송
하나의 FormData 키값 ‘images’에 반복문(forEach)를 활용하여 배열의 요소를 하나씩 할당
content-type은 ‘multipart/form-data' ↔︎ 함께 보내는 string, number 데이터는 'application/json’

 

(string, number)데이터 요청:
JSON.stringyfy로 전송할 데이터들을 json문자열로 변환한 후 객체화이미지와 함께 전송하고, 구별짓기 쉽도록 blob형태로 json데이터를 감싸 전송

 

 

Code

 

  const sendPostRequest = async () => {
    const formData = new FormData();
    const postJSON = JSON.stringify({
      title: post.title,
      content: post.content,
      latitude: post.latitude,
      longitude: post.longitude,
      address: post.address,
    });

    const blob = new Blob([postJSON], { type: 'application/json' });
    formData.append('post', blob);
    post.images.forEach((image) => {
      formData.append(`images`, image);
    });

    return axios.post(`${process.env.REACT_APP_API_URI}/api/posts`, formData, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
  };