예전 multer를 이용한 파일 업로드 구현을 블로그에 게시했는데, 여러개의 필드도 업로드할 일이 있어, 사용해 보는 김에, 블로그에 남깁니다. 예전 페이지에 수정을 할 까도 생각해 봤지만, 따로 두는 것이 좋을 것 같아. (목적 별로 찾을 수 있도록) 블로그를 하나 더 남깁니다.
node js에 express 를 설치하고, multer를 이용해 업로드 처리를 하였습니다.
1. multer 설치.
$ npm i multer
2. multer 로드.
multer등 필요한 모듈을 아래와 같이 인스턴스화 해 줍니다.
var multer = require('multer');
var path = require('path');
3. multer를 초기화 합니다.
아래 코드를 참고해 multer를 생성합니다. 별 내용은 없고, 파일명을 지정하는 메소드등, 옵션 정도 설정해 초기화 합니다.
여기서는 업로드 폴더를 upload로 지정했으므로, express 서버를 시작하는 소스가 담긴 폴더에 upload 폴더를 생성해야 합니다.
대체로 "/upload" 폴더가 됩니다.
var multerNo = 1;
const uploader = multer({
// 저장 위치 결정.
storage: multer.diskStorage({
destination( req, file, cb ){
cb( null, "upload/" );
},
filename( req, file, cb )
{
const ext = path.extname( file.originalname );
cb( null, path.basename( file.originalname, ext ) + "_" + multerNo++ + "_" + new Date().valueOf() + ext )
}
})
// 저장 용량설정.
, limit: { filesize: 5 * 1024 * 1024 }
});
4. 업로드 라우터 설정.
app.post( '/img', uploader.fields( [{name:"img_0"}, {name:"img_1"}, {name:"img_2"}, {name:"img_3"}, {name:"img_4"}] ), function( req, res, next ) {
res.json( req.files );
console.log( req.files );
});
5. 업로드하는 파일 폼의 html은 다음과 같습니다.
<html>
<head>
<title>파일 업로드 테스트를 합니다.</title>
</head>
<body>
<form action="/img" method="POST" enctype="multipart/form-data">
이미지 0 : <input type="file" name="img_0" /><br>
이미지 1 : <input type="file" name="img_1" /><br>
이미지 2 : <input type="file" name="img_2" /><br>
이미지 3 : <input type="file" name="img_3" /><br>
이미지 4 : <input type="file" name="img_4" /><br>
<input type="submit" value="보내기" />
</form>
</body>
</html>
'Node.js' 카테고리의 다른 글
| node.js ws 를 이용한 웹소켓 구현. (6) | 2019.06.02 |
|---|---|
| Express-generator로 express 간단히 셋팅하기. (0) | 2019.06.02 |
| aws node js SMS 보내기 (0) | 2019.05.26 |
| node js 파일 업로드 multer (0) | 2019.05.24 |
| node.js nodemailer gmail (0) | 2019.05.24 |
