이미지 올리기 질문있습니다.

[정중식]

한 페이지 내에서 이미지와 포스트를 작성해서 이미지는 multer 처리를 해주고싶은데요,
강사님이 강의에서 했던 방식으로는 이미지를 전송할 페이지가 따로 있던가 해야하는거같아서 좀 헤매고있습니다.
어떤식으로 구현을 하면 좋을까요?

혹시 FormDate()를 쓰면 어떨까? 싶어서

    let formData = new FormData();
    formData.append('image', file);
    
    fetch('/writer', {
      method: 'POST',
      cache: 'no-cache',
      image: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });

이런식으로해봤는데 서버에서 데이터를 못받는거같아요...

[codingapple]

image: 말고 body:로 해야 데이터전송될듯요

[정중식]

말씀하신대로 body:로 고쳤더니 /uploads 라우터에서 잘받네요,

서버 콘솔에 [Object: null prototype] { file: '1.jpeg' } 이런식으로찍힙니다.

근데 뮬터를 사용하려면  upload.single('file') 여기 괄호안의 file은 input 태그의 name='file'로 줘야 인식을 해주는건데,
이부분은 어떻게설정해야할까요?..


 let fileName;
  fileElement.addEventListener('change', function (e) {
    fileName = e.target.files[0].name;
  });

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    let formData = new FormData();
    formData.append('file', fileName);

    if (fileName) {
      fetch('/upload', {
        method: 'POST',
        cache: 'no-cache',
        body: formData,
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
        });
    }

formData.append(file,fileName) 이런식으로 설정해주면 multer.single('file')가 file로 인식해줘서 작동해주지않을까싶었는데요
콘솔찍어보면 [Object: null prototype] { file: '1.jpg' }  이렇게뜨구요
근데 왜 multer가 작동을안할까요?

[정중식]

후 해냈습니다.. 이 어려운걸 제가 해냈다구요!

 let file;
  fileElement.addEventListener('change', function (e) {
    file = e.target.files[0];
    let formData = new FormData();
    formData.enctype = 'multipart/form-data';
    formData.append('file', file);

    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });
  });

[codingapple]

고수 ㄷㄷ

[글쓴이]

글