사진 업로드 문제

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

김주현

작성한 질문수

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

작성

205

저는 라우터 분류하지않고 index.js에 다 넣고 작업을 하고있습니다! 이렇게도 되는지 궁금해서요!

그런데 multer로 사진 가져오고 옆쪽에 미리보기 하는게 안뜹니다 ㅠㅠ

사진 업로드를 시도하면 아래와 같은 에러가 뜹니다!

C:\Users\이\Desktop\joy\server\index.js:114

[0] return req.status(400).json({success:false, err})

[0] ^

[0]

[0] TypeError: req.status is not a function

[0] at C:\Users\이\Desktop\joy\server\index.js:114:24

[0] at Array.<anonymous> (C:\Users\이\Desktop\joy\node_modules\multer\lib\make-middleware.js:53:37)[0] at listener (C:\Users\이\Desktop\joy\node_modules\on-finished\index.js:169:15)

[0] at onFinish (C:\Users\이\Desktop\joy\node_modules\on-finished\index.js:100:5)

[0] at callback (C:\Users\이\Desktop\joy\node_modules\ee-first\index.js:55:10)

[0] at IncomingMessage.onevent (C:\Users\이\Desktop\joy\node_modules\ee-first\index.js:93:5)

[0] at IncomingMessage.emit (events.js:327:22)

[0] at endReadableNT (_stream_readable.js:1221:12)

[0] at processTicksAndRejections (internal/process/task_queues.js:84:21)

[1] [HPM] Error occurred while trying to proxy request /api/upload/photo from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

[0] [nodemon] app crashed - waiting for file changes before starting...

어떻게 해결할 수 있을까요?

git : https://github.com/joyeee22/boiler-plate-ko 입니다!

nodejs mongodb react 웹앱 redux

답변 1

John Ahn

지식공유자

안녕하세요 주현님 !

우선 하나하나 에러를 알려드릴게요 ~ !

우선

upload(req, res, function(err) {
if(err) {
return req.status(400).json({success:false, err})
}

이거를

upload(req, res, function(err) {
if(err) {
return res.status(400).json({success:false, err})
}

req => res.status 이렇게 바꿔주시고요 ~

server/index.js 에요

app.use('/uploads', express.static('uploads'));

이거를 넣어주세요~

이부분이 뭐냐면 브라우저에서 이미지를 필요한 이미지를 서버에 요청할때

이부분이 있어야지 서버에서 이미지를 제공해줄수 있습니다.

그리고 제공할때는 /uploads 이렇게 써있으니깐

localhost:5000/uploads/{파일이름} 이런식으로 해서 파일을 불러올수있어요

express.static('uploads')는 uploads 폴더를 명시하고있는 것입니다.

저희가 파일을 uploads라는 폴더에 넣어주고있잔아요 ~

그리고 파일 올릴때 보니깐 Uploads 파일에 올리시던데 uploads 로 소문자로 통일해주세요 ~

var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'Uploads/') // 저장

여기 Uploads/ 있죠 ?

uploads로 해주세요 ~

그리고 폴더 만드실때 폴더 명도 uploads 소문자로 해주세요 ~ !

수고하세요 ~

아그리고 index.js 에 다 넣어도 되냐고 하셨는데
상관은 없지만 그래도 어플리케이션이 점점 커질수록 Router를 이용해서 나눠주시는게 좋습니다 !

김주현

작성한 질문수

전체 Q&A

질문하기