[AWS] S3 업로드 에러 400 (Bad Request)

🙀문제점

👉문제 내용

createPresignedPost를 통해 받은 URL을 통해 S3 업로드를 하려는데 오류가 발생했습니다.

👉문제 원인

해당 url로 보내줄 데이터에 제대로 된 값을 넣지 않은 것이 원인이었다.

---

✨해결 방법

아래 코드에서 productImage를 file: productImage로 바꾼 후 문제를 해결했습니다.

file을 key값으로 해서 이미지 데이터를 넣어줘야하는데 key값을 잘못 넣어주고 있었더라구요..ㅠㅜ

수정 전 코드

  const onValid = async ({ name, price, description }: UploadProductForm) => {
    if (loading || !uploadUrl || !compressedFile) return;
    const {
      nFilename,
      image: { url, fields },
    } = uploadUrl;
    const fd = new FormData();
    Object.entries({ ...fields, productImage }).forEach(([key, value]) => { // 오류원인
      fd.append(key, value as string);
    });
    const uploadImage = await fetch(url, { method: "POST", body: fd });
    if (!uploadImage.ok) return;
    uploadProduct({
      file: uploadImage && uploadImage.ok ? nFilename : null,
      name,
      price,
      description,
    });
  };

수정 후 코드

  const onValid = async ({ name, price, description }: UploadProductForm) => {
    if (loading || !uploadUrl || !compressedFile) return;
    const {
      nFilename,
      image: { url, fields },
    } = uploadUrl;
    const fd = new FormData();
    Object.entries({ ...fields, file: productImage }).forEach(([key, value]) => { // 수정
      fd.append(key, value as string);
    });
    const uploadImage = await fetch(url, { method: "POST", body: fd });
    if (!uploadImage.ok) return;
    uploadProduct({
      file: uploadImage && uploadImage.ok ? nFilename : null,
      name,
      price,
      description,
    });
  };

매우 간단한 문제였죠..????! 너무 어이없는 실수였네욥..