인프런 커뮤니티 질문&답변
작성한 질문수
multer를 이용해 클라이언트 request를 받는 것과 express의 router로 request를 받는 것 질문이요!
작성
·
194
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)
});
};
도대체 왜 이런 현상이 발생하며, 무슨 차이가 있는 것일까요...?
답변 3
2
John Ahn
지식공유자
우선 andrewlee 님 대신 답변해주셔서 감사합니다 ^^
그리고 이 질문에 대한 답변은 프로그래밍은 언어라고 생각해야 하는 부분에서 답을 얻을수 있을것 같아요.
언어는 가끔보면 논리적으로 이해해야 하기 보다 사람들의 약속으로 만들어진 부분도 있잔아요 ?
이 부분도 어찌 그러한 관점에서 보셔야 이해하기가 편합니다.
post method로 body로 보내준 정보들은 req.body 로 가져올수 있죠
그리고 get method로 query param으로 보내준 정보들은 req.query로 또한 가져올수 있죠.
하지만 이부분에서는 formData로 보내주었잔아요 ? 그건 위에 것들 처럼 약속과 같이
multer를 통해서 정보를 잡아 올수가 있게 되어 있답니다 ^^
0
일단 제가 보기엔
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