선생님 createObjectURL 코드 관련 질문있습니다.

[정중식]

createObjectURL로 이미지 미리보기를 만들고,

onSumbit 하면 이미지를 s3에 보내고, 몽고디비에 제목,내용,s3에 저장된 url 주소 를 보내려고 다음과같이 코드짰는데요,

s3에서 400에러를 뱉어냅니다. 이미지가 안올라가요 선생님이 강의에서 짜신 코드 그대로해봤는데도 똑같습니다.

onSubmit에 코드를 옮기면 안되고, 

input에서 그대로 s3에 보내는거는 잘됩니다.

제가 놓친부분이있을까요?

const onFileUpload = async (e) => {
    e.preventDefault();
    if (!e.target.files) return;

    const file = e.target.files[0];

    if (file) {
      let image = window.URL.createObjectURL(file);

      setImageURL(image);
      setImageFile(file);
    }
  };

  const onSubmit = async (e) => {
    e.preventDefault();

    let filename = encodeURIComponent(imageFile.name);
    let res = await fetch('/api/post/image?file=' + filename);
    res = await res.json();

    //S3 업로드
    const formData = new FormData();
    Object.entries({ ...res.fields, imageFile }).forEach(([key, value]) => {
      formData.append(key, value);
    });
    let 업로드결과 = await fetch(res.url, {
      method: 'POST',
      body: formData,
    });
    console.log(업로드결과);

    if (업로드결과.ok) {
      setSrc(업로드결과.url + '/' + filename);
    } else {

      console.log('실패');
    }
}

  return (
    <div className='form-container'>
      <h4 className='title'>글작성페이지</h4>

      <form className='post-form' onSubmit={onSubmit}>
        <input
          type='text'
          value={title}
          placeholder='글제목'
          onChange={(e) => setTitle(e.target.value)}
        />
        <textarea
          type='text'
          value={contents}
          placeholder='글내용'
          onChange={(e) => setContents(e.target.value)}
        />

        <input type='file' accept='image/*' onChange={(e) => onFileUpload(e)} />

        {imageURL && (
          <img
            src={imageURL}
            alt='미리보기이미지'
            style={{ marginBottom: '1rem' }}
          />
        )}

        <button type='submit'>글작성</button>
      </form>
    </div>
  );



+++++++++++++++++++++++++

차이점은 input 태그에 붙어있는 accept='image/*' 이거인거같은데..
onSubmit에서 보낼때 컨텐츠타입을 이런식으로 붙여봤는데도 안되네요..

    let 업로드결과 = await fetch(res.url, {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: formData,
    });

근데,     const formData = new FormData(); 이걸썻는데      'Content-Type': 'multipart/form-data',이걸 써야하나? 싶기도하구요..

[codingapple]

let 업로드결과 = await fetch(res.url 여기서 res.url 잘나오나 출력해보거나
파일들은 state에 잘 저장되어있나 출력해봅시다

[정중식]

선생님 답변감사합니다.
말씀하신대로 onSumbit함수안에서 콘솔 다 찍어서확인해봤는데 이상없이 다 나오고있습니다. input태그에서 직접 파일업로드했을때와 똑같이 콘솔찍혀서나옵니다.
다만, 다른점은 '업로드 결과'만 400에러가 나옵니다.

제 문제의 코드인데 혹시 여기서 잘못된점이 있을까요?
검색실력이 부족한것인지 여러 검색을해보고 찾아봤는데 제 문제는 없는거같아서 지푸라기잡는 심정으로 선생님께 문의드려봅니다..

'use client';

import { useState } from 'react';

const Write = () => {
  const [imageURL, setImageURL] = useState('');
  const [imageFile, setImageFile] = useState('');
  const [title, setTitle] = useState('');
  const [contents, setContents] = useState('');

  const [src, setSrc] = useState('');

  const onFileUpload = async (e) => {
    e.preventDefault();
    if (!e.target.files) return;

    const file = e.target.files[0];

    if (file) {
      let image = window.URL.createObjectURL(file);

      setImageURL(image);
      setImageFile(file);
    }
  };

  const onSubmit = async (e) => {
    e.preventDefault();

    const filename = encodeURIComponent(imageFile.name);

    let res = await fetch('/api/post/image?file=' + filename);
    res = await res.json();

    //S3 업로드
    const formData = new FormData();
    Object.entries({ ...res.fields, imageFile }).forEach(([key, value]) => {
      formData.append(key, value);
    });

    let 업로드결과 = await fetch(res.url, {
      method: 'POST',

      body: formData,
    });

    console.log(업로드결과);
    console.log('res.url,', res.url);
    console.log('res.fields,', res.fields);
    console.log('imageFile,', imageFile);

    if (업로드결과.ok) {
      setSrc(업로드결과.url + '/' + filename);
    } else {
      console.log('실패');
    }
  };

  return (
    <div className='form-container'>
      <h4 className='title'>글작성페이지</h4>

      <form className='post-form' onSubmit={onSubmit}>
        <input
          type='text'
          value={title}
          placeholder='글제목'
          onChange={(e) => setTitle(e.target.value)}
        />
        <textarea
          type='text'
          value={contents}
          placeholder='글내용'
          onChange={(e) => setContents(e.target.value)}
        />

        <input type='file' accept='image/*' onChange={(e) => onFileUpload(e)} />

        {imageURL && (
          <img
            src={imageURL}
            alt='미리보기이미지'
            style={{ marginBottom: '1rem' }}
          />
        )}

        <button type='submit'>글작성</button>
      </form>
    </div>
  );
};

export default Write;

[정중식]

헐 선생님 문제점을 찾았어요

   //S3 업로드
    const formData = new FormData();
    Object.entries({ ...res.fields, file: imageFile }).forEach(
      ([key, value]) => {
        formData.append(key, value);
      }
    );

검정색 부분을 해줘야하는거였네요? 
혹시 왜 무엇때문에 저런건지 알려주시면 안될까요?..

[codingapple]

보낼 때 file : 이라는 key 이름으로 보내야합니다

[글쓴이]

글