DB 없이 해본 테스트용. 입력한 주소가 계속 남아있는 게 아닌 일회성이므로 MongoDB 연동해서 여러개 사이트 추가해야함.
프로젝트 폴더 안에 body-parser, errorhandler, express, express-error-handler, fs, mime, multer, serve-static 등이 필요하다. 오류가 나면 npm install 모듈명 입력해서 필요한 거 설치.
프로젝트 구성
public----404.html
|---bookmark.html
uploads
app.js
package.json
node_modules
bookmark.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>즐겨찾기 추가</title> </head> <body> <h1>즐겨찾기 추가</h1> <br> <form method="post" enctype="multipart/form-data" action="/process/bookmark"> <div> <table> <tr> <th>사이트 주소</th><th>명칭</th><th>대표 이미지</th> </tr> <tr> <td><input type="input" name="bookmarkUrl"/></td> <td><input type="input" name="bookmarkName"/></td> <td><input type="file" name="bookmark" /></td> </tr> </table> <input type="submit" value="추가" name="submit"/> </div> </form> </body> </html> | cs |
404.html
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>에러 페이지</title> </head> <body> <h3>ERROR - 페이지를 찾을 수 없습니다.</h3> <hr/> <p>/public/404.html 파일의 에러 페이지를 표시한 것입니다.</p> </body> </html> | cs |
app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | // Express 기본 모듈 불러오기 var express = require('express') , http = require('http') , path = require('path'); // Express의 미들웨어 불러오기 var bodyParser = require('body-parser') , cookieParser = require('cookie-parser') , static = require('serve-static') , errorHandler = require('errorhandler'); // 에러 핸들러 모듈 사용 var expressErrorHandler = require('express-error-handler'); // Session 미들웨어 불러오기 var expressSession = require('express-session'); // 파일 업로드용 미들웨어 var multer = require('multer'); var fs = require('fs'); //클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원 var cors = require('cors'); // 익스프레스 객체 생성 var app = express(); // 기본 속성 설정 app.set('port', process.env.PORT || 3000); // body-parser를 이용해 application/x-www-form-urlencoded 파싱 app.use(bodyParser.urlencoded({ extended: false })) // body-parser를 이용해 application/json 파싱 app.use(bodyParser.json()) // public 폴더와 uploads 폴더 오픈 app.use('/public', static(path.join(__dirname, 'public'))); app.use('/uploads', static(path.join(__dirname, 'uploads'))); // cookie-parser 설정 app.use(cookieParser()); // 세션 설정 app.use(expressSession({ secret:'my key', resave:true, saveUninitialized:true })); //클라이언트에서 ajax로 요청 시 CORS(다중 서버 접속) 지원 app.use(cors()); //multer 미들웨어 사용 : 미들웨어 사용 순서 중요 body-parser -> multer -> router // 파일 제한 : 10개, 1G var storage = multer.diskStorage({ destination: function (req, file, callback) { callback(null, 'uploads') }, filename: function (req, file, callback) { callback(null, file.originalname) } }); var upload = multer({ storage: storage, limits: { files: 10, fileSize: 1024 * 1024 * 1024 } }); // 라우터 사용하여 라우팅 함수 등록 var router = express.Router(); // 파일 업로드 라우팅 함수 - 로그인 후 세션 저장함 router.route('/process/bookmark').post(upload.array('bookmark', 1), function(req, res) { console.log('/process/bookmark 호출됨.'); try { var files = req.files; var bookmarkUrl=req.body.bookmarkUrl; var bookmarkName=req.body.bookmarkName; console.dir('#===== 업로드된 첫번째 파일 정보 =====#') console.dir(req.files[0]); console.dir('#=====#') console.log('북마크 주소'+bookmarkUrl); console.log('북마크 이름'+bookmarkName); // 현재의 파일 정보를 저장할 변수 선언 var originalname = '', filename = '', mimetype = '', size = 0; if (Array.isArray(files)) { // 배열에 들어가 있는 경우 (설정에서 1개의 파일도 배열에 넣게 했음) console.log("배열에 들어있는 파일 갯수 : %d", files.length); for (var index = 0; index < files.length; index++) { originalname = files[index].originalname; filename = files[index].filename; mimetype = files[index].mimetype; size = files[index].size; } } else { // 배열에 들어가 있지 않은 경우 (현재 설정에서는 해당 없음) console.log("파일 갯수 : 1 "); originalname = files[index].originalname; filename = files[index].name; mimetype = files[index].mimetype; size = files[index].size; } console.log('현재 파일 정보 : ' + originalname + ', ' + filename + ', ' + mimetype + ', ' + size); // 클라이언트에 응답 전송 res.writeHead('200', {'Content-Type':'text/html;charset=utf8'}); res.write('<h3>즐겨찾기 추가 성공</h3>'); res.write('<hr/>'); res.write('<p>원본 파일명 : ' + originalname + ' -> 저장 파일명 : ' + filename + '</p>'); res.write('<p>MIME TYPE : ' + mimetype + '</p>'); res.write('<p>파일 크기 : ' + size + '</p>'); res.write('<table border=1><tr><th>원본 이미지 보기</th><th>사이트로 이동</th></tr>'); res.write('<tr><td>'); res.write('<a href="../uploads/'+filename+'">'+bookmarkName+'</a>'); res.write('</td><td>'); res.write('<a href="'+bookmarkUrl+'" target="_blank">'+'<img src="../uploads/'+filename+'"/>'+'</a>'); res.write('</td></tr></table>'); res.write('<a href="../public/bookmark.html"><input type="button" value="다시 추가"></a>'); res.end(); } catch(err) { console.dir(err.stack); } }); app.use('/', router); // 404 에러 페이지 처리 var errorHandler = expressErrorHandler({ static: { '404': './public/404.html' } }); app.use( expressErrorHandler.httpError(404) ); app.use( errorHandler ); // Express 서버 시작 http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); | cs |
결과
localhost:3000/public/bookmark.html로 접속
원하는 사이트 주소를 입력, 그 사이트에 대한 명칭 임의로 입력, 사이트를 대표하는 이미지 업로드
추가 버튼을 누르면 아래 페이지가 뜬다. 나루토 하이퍼링크를 누르면 원본 이미지가 뜨고 나루토 이미지를 누르면 유투브 사이트로 이동한다.
원본 이미지
유투브 사이트
출처 Do it Node.js 프로그래밍 + 약간 변형
