multer랑 프론트랑 결합하는 과정에서 질문있습니다.

안녕하세요

영상을 보다가 프론트랑 결합해서 작은 프로젝트를 만들어 보고있습니다.

multer를 적용하고 프론트와 결합하는 과정에서 이미지를 선택하면 콘솔에 지속적으로 500에러가 발생해서 찾아보고 시도했으나 방법을 찾지못해 질문드립니다.

백엔드 + 프론트 = Node - v18.7.0

프론트 주요 라이브러리 버전 = React-18.2.0, Next = 12.3.1, TypeScript = 4.8.4

백엔드의 경우 타입스크립트 미 사용중입니다.

백엔드랑 프론트는 별도의 프로젝트로 만들어서 따로 관리중이며 프론트는 리덕스나 리코일 같은 별도 상태관리 라이브러리 미사용중입니다.

백엔드 에러메시지

TypeError: Cannot read properties of undefined (reading 'filename')

at /Users/Desktop/Temp-toyProject-Backend/Routes/TempPost.js:31:39

이며 해당 부분에서 이 부분이 문제가 되는게 아닐까? 하는 부분은 다음과 같습니다.

const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, cb) {
      cb(null, 'uploads/');
    },
    filename(req, file, cb) { <<<< ?????
      const ext = path.extname(file.originalname);
      cb(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 },
});

router.post('/img',  upload.single('img'), (req, res) => {

res.json({ url: `/img/${req.body.file.filename}` }); // <<< 에러가 나오는 31줄 
});

multer를 사용한 부분은 강사님의 영상에서 별도로 제작하신 미들웨어 등 몇가지 빼고는 그대로 가지고왔습니다.

2.백엔드와 결합되는 프론트 코드

const [content, setContent] = useState("")

  const [img, setImage] = useState<File>()

  const onChangeTitle = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
      setContent(e.target.value)
  },[])

    const onChanges = useCallback((e:React.ChangeEvent<HTMLInputElement>) => {
      e.preventDefault()
      const formData = new FormData()
      formData.append('img', img)

      axios.post('http://localhost:8005/temppost/img', formData, { // <<< 백엔드 코드의 부분
          headers: { 'Content-type': 'multipart/form-data' }, 
      })
      .then((res) => {
     console.log(res.data)
      })
      .catch((error) => {
          console.error(error)
      })
  },[img])

    const onSubmit = useCallback((e:any) => {
      e.preventDefault()
      axios.post('http://localhost:8005/temppost', { 
        headers: { 'Content-type': 'multipart/form-data' },
          img ,
          content : content 
      })

      .then((res) => { 
     console.log(res.data)
      })

      .catch((error) => {
          console.error(error)
      })
  },[img,content])

return (
   <form encType="multipart/form-data" > // 이미지와 content를 입력받고 보내는 부분
         <input type="file" name="img" onChange={onChanges} />
        <input name="content" type="text"  onChange={onChangeTitle}  />
        <input type="submit"  onClick={onSubmit}/>
    </form>

)

프론트쪽의 경우 다른걸 참고하긴 했는대 이미지와 관련된 state는 타입을 저렇게 <File>로 줘도 될까요?

항상 영상 잘 보고 있습니다 감사합니다..

인프런 커뮤니티 질문&답변