[NodeExpressTs] 4. 개쉬운 파일 업로드
멀티 미디어는 상당한 골치거리다
저작권이란게 있는가하면
접근권한 부터 시작해서
저장소까지 고민해야할게 끊임없다
필자는 그냥 서버가 돌아가고있는 컴터기준 하드디스크에 업로드하는 예를 들겠다
클라우드 스토레이지를 쓴다면
로컬파일 업로드 기술-> 옵션 : 파일 전처리 -> 클라우드 업로드 -> 로컬파일 삭제
이런식으로 가면 된다
src/multure/imageUpload.ts
import * as express from 'express';
const multer = require('multer');
//path라는 변수는.. nodejs 기본 내장 라이브러리 path 라는걸 활용해 파일의 경로, 이름, 확장자 등을 알아낼 때 사용합니다.
let path = require('path');
//diskStorage라는 함수를 쓰면 업로드된 파일을 하드에 저장할 수 있습니다. memoryStorage라고 쓰시면 하드 말고 램에 저장할 수 있습니다 (휘발성)
let storage = multer.diskStorage({
//destination : 업로드된 파일을 하드 어떤 경로에 저장할지 정하는 부분입니다. 알아서 정하십쇼
destination: function (req: express.Request, file: any, cb: any) {
cb(null, './public/image');
},
//filename : 파일의 이름을 결정하는 부분입니다. 저장할 때 어떤 이름으로 저장할겁니까. file.originalname이라고 쓰면 그냥 원본 그대로라는 뜻입니다.
filename: function (req: express.Request, file: any, cb: any) {
cb(null, file.originalname);
},
});
//파일 업로드 하고나면 router 쪽에선 req.file || req.files 에서 꺼낼수 있음
let upload = multer({
storage: storage,
fileFilter: function (req: express.Request, file: any, callback: any) {
if (!file.mimetype.includes('image')) {
return callback(new Error('이미지만 업로드하세요'));
}
callback(null, true);
},
//limits는 파일의 사이즈 제한을 걸고 싶을 때 씁니다. 1024 * 1024는 1MB를 뜻합니다.
limits: {
fileSize: 1024 * 1024,
},
});
//module.exports = upload;
export default upload;
문법이 못생겼는가?
원래 인생이란 이런것이다
지금 무슨일이 일어나고 있는것이냐면
let upload = multer() 이러면 upload 기능을 할수있는 객체가 만들어 지는데
multer( 이 부분에 자바스크립트 오트젝트나 함수들로 이루어진 옵션들을 먹이고 있는것이다
해석을 하자면
저장경로, 파일검사, 용량검사 옵션들을 먹여서 파일 업로드 기능을 수행할수 있는 객체를 만들어라
파일 업로드를 할때는 라우터 부분에서 imageUpload.ts 를 가져와서
upload 객체를 사용해주면 된다
src/Router/ejsStyle/basicCrud.route.ts
뭐뭐뭐 많은 코드들...
import imgUpload from '../../multer/imageUpload';
/** upload.single 일땐 req.file에 파일 정보 있음
* upload.array 일땐 req.files에 파일정보 있음
*/
router.post('/upload', imgUpload.array('프로필'), function (req, res) {
res.send('업로드완료');
});
import imgUpload from '../../multer/imageUpload'; 부분에서 export 시킨 upload 객체를
가져오고,
router 부분 중간에 imgUpload 함수를 끼워넣었다
imgUpload.array('프로필') = 멀티파일 업로드. input 항목의 name은 프로필
imgUpload.single('프로필') = 싱글파일 업로드. input 항목의 name은 프로필
이 뜻은 /ejs/upload 라는 경로로 라우터에 진입하면 이미지업로드 기능을 먼저 가동 시키고
다 처리가 되고나면 function(req,res){} 쪽으로 진입하라는 뜻이다
이미지가 업로드 되기전엔 multer쪽에서 설정한 유효성 검사를 실시하고, 파일 업로드후
imgUpload.single 경우는 req.file,
imgUpload.array경우는 req.files 에 업로드한 파일의 메타 정보가 쫙 실려있다.
console.log(req.files) 이렇게하면 써먹을수 있는 정보들이 다 뜰것이다
댓글
댓글 쓰기