작성
·
515
0
안녕하세요
영상을 보다가 프론트랑 결합해서 작은 프로젝트를 만들어 보고있습니다.
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>로 줘도 될까요?
항상 영상 잘 보고 있습니다 감사합니다..