해냈다..
참고자료 : 한음

여러 삽질, 고난과 인내의 시간을 걸쳐 마침내 원하는 방향으로 나아가게되었다.

코드

프론트

	<input type="file" name="file" class="file" />

  const fileElement = document.querySelector('.file');

  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);
      });
  });

server쪽 코드

router

router.post(
  '/upload',
  isLogin,
  upload.single('file'),
  async (req, res, next) => {
    try {
      res.json({
        success: true,
        fileInfo: req.file,
      });
    } catch (error) {
      console.log(error);
    }
  }
);

multer

const multer = require('multer');

const path = require('path');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, __dirname.slice(0, 53) + 'public/image');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now().toString() + file.originalname);
  },
});

module.exports = multer({
  storage: storage,

  limits: { fileSize: 5 * 1024 * 1024 },
});

느낀점

누가 성공과 실패는 한 끗 차이라고했는데 이번에 뼈저리게 느낀것 같다.

formData를 사용해야한다는 정답에 근접을했고, fetch와함께 전송을해줬지만 /upload 라우터에 파일이 가지않았었다.
그게 formData.enctype = 'multipart/form-data';를 사용해주지 않아서 그런거였다.
이미지를 전송할때 form에 multipart/form-data를 붙이면 된다는거는 알고있었다.
그래서 실제로 input태그를 감싸고있는 form태그에 multipart/form-data를 붙였는데도 라우터 요청은 잘 갔으나 파일이 전송이 안되었다.
혹시 싶어서 fetch header에 multipart/form-data를 붙여보기도했었지만 에러가났기에 이 방법은 패쓰했었다.
그러다가 찾은게 formData에도 multipart/form-data를 붙일 수 있다는거였는데.. 이 방법이 통해서 정말 다행이다.