Summry
본 문서에서는 node.js에서 multer module을 사용해 이미지를 업로드 및 폼데이터를 처리하는 방법을 정리한다.
- express는 사용자가 업로드한 파일을 받아서 저장하는 기본 기능을 제공하지 않는다.
- 따라서 모듈을 설치해서 (ex. multer) 사용자가 전송한 파일을 처리하는 작업을 해야한다.
send me email if you have any questions.
module install
$ npm install multer --save
code example
const multer = require('multer');
// dets : 저장 위치, limits : 파일 최대 크기 제한
const upload = multer({ dest: 'images/', limits: { fileSize: 5 * 1024 * 1024 } });
app.post('/upload', upload.single('img'), (req, res) => {
console.log(req.file);
});
폼데이터나 폼 태그를 통해 업로드한 이미지를 올리면 req.file로 정보가 들어오고, dest 속성에 지정해둔 경로에 이미지가 저장된다.
upload.single('img') 폼데이터의 속성명이 img이거나 폼 태그 인풋의 name이 img인 파일 하나를 받겠다는 뜻이다. 이미지가 아닌 나머지 데이터는 그대로 req.body에 들어오게 된다.
- 만약 이미지를 하나가 아닌 여러 개를 받고 싶다면 upload.array(‘키’, 최대파일개수)를 사용한다. req.file 대신 req.files에 정보가 담긴다.
const multer = require('multer');
// dets : 저장 위치, limits : 파일 최대 크기 제한
const upload = multer({ dest: 'images/', limits: { fileSize: 5 * 1024 * 1024 } });
app.post('/up', upload.array('img'), (req, res) => {
console.log(req.file);
});
업로드된 파일 이름이 이상하다면
images/에 파일이 업로드 되긴 하는데 파일명이 ff542d0193e5b9053d5c1b4e803614a1처럼 저장된다면 아래의 방법으로 원래 이름으로 저장할 수 있다.
- 파일명이 알아보기 어렵고 확장자가 붙지 않는것은 보안상 의도된것임.
const upload = multer({
storage: multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'images/');
},
filename: function (req, file, cb) {
cb(null, file.originalname);
}
}),
});
위의 방법은 파일명이 중복되는 문제가 발생할 수 있다.
const path = require('path');
const upload = multer({
storage: multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'images/');
},
filename: function (req, file, cb) {
cb(null, new Date().valueOf() + path.extname(file.originalname));
}
}),
});
위의 방법을 사용하면 타임스탬프.확장자 형식으로 파일명이 저장된다.