[React] axios POST API 이미지와 함께 보내기

- Components

const handleArticlePost = async () => {
  // input을 통해 이미지 등록하기
  const productImages = document.querySelector('#image_file');
  // 이미지가 여러개일 경우
  for (let i = 0; i < productImages.files.length; i++) {
    formData.append('productImages', productImages.files[i]);
  }
  // 이미지파일이 아닌 일반 string 파일 추가하기
  const json = JSON.stringify({
    productName: title,
    placeName: coord.place_name,
    latitude: coord.lat,
    longitude: coord.lon,
    startDay: postStartDay,
    endDay: postEndDay,
    price: price,
    content: content,
    areaCode: coord.code,
    isNationwide: nationWide,
    isPurchasable: purchasable,
    areaName3depth: coord.addr_depth_3,
    regionCode: coord.code,
  });

  // string 오브젝트 Blob 로 선언하고 type 지정하기
  const blob = new Blob([json], { type: 'application/json' });
  const blobMember = new Blob(['10000001'], { type: 'application/json' });
  formData.append('postData', blob);
  formData.append('memberId', blobMember);
  try {
  	// writePOST 로 값 전달해주기
    // formData에는 이미지와 string 값
    // isLogin은 Token 값
    const result = await writePOST(formData, isLogin);
    console.log(result);
    // 글 등록 후 반환된 값을 사용하여 해당 글 상세페이지로 이동하기
    navigate(`/detail?info=${result.data.id}`, { state: { isWrite: true } });
  } catch (error) {
    // 등록이 실패할 경우 에러메시지 출력
    console.error('writePOST error:', error);
  }
};

- axios hooks

// Components 에서 전달받은 formData와 Token 값 지정
export const writePOST = (formData, isLogin) => {
  return new Promise((resolve, reject) => {
    axios
      .post(`${DevURL}/articles`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: isLogin,
        },
        transformRequest: (data, headers) => {
          return data;
        },
      })
      .then((res) => {
        resolve(res);
      })
      .catch((err) => {
        console.error(err);
        reject(err);
      });
  });
};

 

내가 까먹지 않기 위해 기록하기