一个简单的blog系统（三） 增加文件上传功能

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')函数后添加如下代码：

//上传文件页路由
router.get('/upload', checkLogin);    //限定只有登录的用户才能上传文件
router.get('/upload', function(req, res) {
    res.render('upload', {
        title: '文件上传',
        user: req.session.user,
        success: req.flash('success').toString(),
        error: req.flash('error').toString()
    });
});

　　2.3 其次，我们在views文件夹下面新建upload.ejs，添加如下代码：

<div class='container'>
    <h2>文件上传</h2>
    <hr/>
    <form enctype="multipart/form-data" method="post" action="/upload" class="form-horizontal">
        <div class="form-group">
          <label for="file1">文件输入</label>
          <input type="file" name="file1">
       </div>
       <div class="form-group">
          <label for="file1">文件输入</label>
          <input type="file" name="file1">
       </div>
       <div class="form-group">
          <label for="file1">文件输入</label>
          <input type="file" name="file1">
       </div>
       <button type="submit" class="btn btn-primary">上传</button>
   </form>
</div>

　　2.4 然后，修改app.js，添加如下代码：

var multer  = require('multer');
// 文件上传插件
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/images/user')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
});
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');
});

　　至此，我们就给博客添加了文件上传功能。