파일 저장안되는 문제

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

해결된 질문

작성

145

파일을 올리면 위와같이 나오고 저장을 하면 DB에 저장되지 않습니다... 같은 강의 계속보면서 뭐가 문제인지 찾는데 해결이 안됩니다. 혹시 몰라서 깃 주소 올려드립니다.

https://github.com/sunghye-on/shop

redux nodejs react mongodb 웹앱

답변 2

sungHyeon

질문자

친절한 답변 감사드립니다!!!

우선 첫번째 오타는 선생님 깃허브를 보면서 오타를 찾다보니 그렇게 된듯합니다ㅠㅠ

선생님 깃허브

다음으로 2번은 제가 .gitignore에 uploads폴더를 적어놔서 깃허브에는 안올라갔나봅니다...! 만들기는 정상적으로 만들어져있습니다. (혹시 이부분이 문제가 된다면 말씀해주세요ㅠㅠ)

3번에 오타는 생각지도 못한곳에서 났습니다. 찾아주셔서 진심으로 감사합니다. 기존에 이미지가 올라가지만 렌더링되지 않던 문제가 해결되었습니다.

콘솔로그를 찍어가며 데이터의 흐름을 파악하면서 따라갔습니다. 알고보니 UploadProductPage.js의 서버로 데이터를 전달하는 부분에서 이미지를 image로 저장한 탓에 DB가 알고 있는 images와 달라서 이미지를 저장하지 않았던 문제 였습니다...!!

감사합니다.

John Ahn

지식공유자

안녕하세요 sungHyeon님

우선 차례차례 오타난 부분을 알려드리겠습니다 ~
1.

upload(req, res, (err) => {
if (err) {
return req.json({ success: false, err });
}
return res.json({
success: true,
filePath: res.req.file.path,
fileName: res.req.file.filename,
});
});

여기 보시면 upload를 한다음에 그 결과를 보내줄때 req 파라미터가 아닌 res (response) 파라미터를 이용해서 던져주셔야합니다
======> req => res

2. 이미지 업로드 하실때는 uploads 폴더를 먼저 root directory에 생성을 해주셔야 합니다

3. FileUpload.js 에서 보시면

<img
style={{ minWidth: "300px", width: "300px", height: "240px" }}
src={`http:localhost:5000/${image}`}
/>

이미지를 가져오는 경로에 오타가 있습니다

=======> http:localhost:5000 => http://localhost:5000

이렇게 해주시면 DB에도 잘 저장이 되있을겁니다 ^^
수고하세요 ~ !

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

파일 저장안되는 문제