• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

multer를 이용해 클라이언트 request를 받는 것과 express의 router로 request를 받는 것 질문이요!

20.04.15 23:39 작성 조회수 152

0

안녕하세요! 강의 잘 듣고 있습니다.

저번의 질문 해결해주신 것 감사합니다!

진행 도중 또 질문이 생겨 올립니다 ㅠㅠ

파일 저장을 위한 storage 설정을 한 후에 그 설정 정보를 변수에  다음과 같이 담고서, 

/ STORAGE MULTER CONFIG
let storage = multer.diskStorage({
    // 클라이언트로 전달 받은 파일을 서버의 어느 곳에 저장할지 설정하는 부분이다.
    // node server 폴더 구조에 맞춰서 uploads라는 폴더를 생성해 주자!
    destination: (req, file, cb) => {
        cb(null, "uploads/");
    },

    // 저장되는 파일 이름을 지정하는 부분이다.
    filename: (req, file, cb) => {
        cb(null, `${Date.now()}_${file.originalname}`);
    }
});

// 파일 저장 방식에 대해 설정한 정보를 upload란 변수에 담는다. 파일은 하나만 핸들링한다.
const upload = multer({
    storage: storage
}).single("file");

그 후에 upload 변수를 이용해 router 처리 시에 클라이언트로부터 온 파일을 핸들링 하는데요, 다음의 차이가 있습니다.

router.post('/uploadfiles', (req, res) => {
    // 찍히지 않는다
    console.log("req.file : ", req.file);

    // 클라이언트에서 받은 비디오 파일을 노드 서버에 저장한다.
    // 이를 위해 multer라는 dependency를 다운받는다.
    upload(req, res, (err) => {
        // 파일 필터링
        let typeArray = req.file.filename.split('.');
        let fileType = typeArray[1];

        // 확장자가 동영상이 아니라면
        if(fileType !== 'mp4' && fileType !== 'avi') {
            return res.json({success: false, err});
        }

        // 잘 찍힌다.
        console.log("req.file : ", req.file);

        if(err) {
            return res.json({success: false, err});
        } 

        return res.json({
            success: true, 
            url: req.file.path, 
            fileName: req.file.filename
        });
    })
});

upload 내에서만 req.file이 찍히는데요, 클라이언트 요청에서의 코드는 formData에 'file'이란 key로 다음과 같이 보내줍니다.

const onDrop = (files) => {
        let formData = new FormData;

        formData.append('file', files[0]);
        
        const config = {
            header: {'content-type': 'multipart/form-data'}
        };

        axios.post('/api/video/uploadfiles', formData, config)
        .then(response => {
            if(response.data.success) {
                console.log(response.data);
            } else {
                alert('비디오 업로드를 실패했습니다.');
            }
        })
        .catch(error => {
            console.log(error)
        });
   };

도대체 왜 이런 현상이 발생하며, 무슨 차이가 있는 것일까요...?

course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

답변 3

·

답변을 작성해보세요.

2

John Ahn님의 프로필

John Ahn

지식공유자

2020.04.18

우선 andrewlee 님  대신 답변해주셔서 감사합니다 ^^ 

그리고 이 질문에 대한 답변은    프로그래밍은 언어라고 생각해야 하는 부분에서 답을 얻을수 있을것 같아요.

언어는 가끔보면 논리적으로 이해해야 하기 보다 사람들의 약속으로 만들어진 부분도 있잔아요 ?

이 부분도 어찌 그러한 관점에서 보셔야 이해하기가 편합니다.

post method로 body로 보내준 정보들은 req.body 로 가져올수 있죠 

그리고 get method로 query param으로 보내준 정보들은 req.query로 또한 가져올수 있죠.

하지만 이부분에서는 formData로 보내주었잔아요 ? 그건 위에 것들 처럼 약속과 같이

multer를 통해서 정보를 잡아 올수가 있게 되어 있답니다 ^^  

0

andrewlee님의 프로필

andrewlee

2020.04.16

일단 제가 보기엔 

        return res.json({

            success: true, 

            url: req.file.path, 

            fileName: req.file.filename

        });

위 코드를 

        return (
            res.json({success:true ,   url : res.req.file.path ,  fileName : res.req.file.filename
            })

이렇게 고치셔야 할 것 같아요. 

0

andrewlee님의 프로필

andrewlee

2020.04.16

git을 통해 코드를 올리셔야 정확하고 빠르게 답변을 할 수가 있으실 것 같습니다. 

이 글과 비슷한 Q&A