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

안녕하세요

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

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

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

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

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

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

1. 백엔드 에러메시지

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>로 줘도 될까요?

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