标签:
1. 一个完整的博客怎么能缺少图片呢,目前上传文件的方法有三种:
(1)使用Express自带的文件上传功能,不涉及数据库。
(2)使用Formidable外部模块,不涉及数据库。
(3)上传到MongoDB,涉及到数据库。
可以看出,第一种方式最简单,Express通过bodyParser()解析请求体,因此我们可以使用bodyParser()来实现文件的上传功能。
2.实现过程
2.1 首先打开header.ejs,在<li><a href="/post" title=‘发表‘>发表</a></li>,前面添加一行代码:
<li><a href="/upload" title="上传">上传</a></li>
2.2 然后,打开index.js,在app.get(‘/logout‘)函数后添加如下代码:
1 //上传文件页路由 2 router.get(‘/upload‘, checkLogin); //限定只有登录的用户才能上传文件 3 router.get(‘/upload‘, function(req, res) { 4 res.render(‘upload‘, { 5 title: ‘文件上传‘, 6 user: req.session.user, 7 success: req.flash(‘success‘).toString(), 8 error: req.flash(‘error‘).toString() 9 }); 10 });
2.3 其次,我们在views文件夹下面新建upload.ejs,添加如下代码:
1 <div class=‘container‘> 2 <h2>文件上传</h2> 3 <hr/> 4 <form enctype="multipart/form-data" method="post" action="/upload" class="form-horizontal"> 5 <div class="form-group"> 6 <label for="file1">文件输入</label> 7 <input type="file" name="file1"> 8 </div> 9 <div class="form-group"> 10 <label for="file1">文件输入</label> 11 <input type="file" name="file1"> 12 </div> 13 <div class="form-group"> 14 <label for="file1">文件输入</label> 15 <input type="file" name="file1"> 16 </div> 17 <button type="submit" class="btn btn-primary">上传</button> 18 </form> 19 </div>
2.4 然后,修改app.js,添加如下代码:
1 var multer = require(‘multer‘); 2 // 文件上传插件 3 var storage = multer.diskStorage({ 4 destination: function (req, file, cb) { 5 cb(null, ‘./public/images/user‘) 6 }, 7 filename: function (req, file, cb) { 8 cb(null, file.fieldname + ‘-‘ + Date.now()) 9 } 10 }); 11 app.use(multer({ storage: storage }).any());
2.5 现在我们现在只是有了一个可以上传文件的表单而已,并不能上传文件,接下来我们添加对上传文件的支持。在 router.get(‘/upload‘) 后添加如下代码:
router.post(‘/upload‘, checkLogin); router.post(‘/upload‘, function (req, res) { req.flash(‘success‘, ‘文件上传成功!‘); res.redirect(‘/upload‘); });
至此,我们就给博客添加了文件上传功能。
标签:
原文地址:http://www.cnblogs.com/yuity/p/5299112.html