第3章 增加文件上傳功能

一個完整的博客怎么能缺少圖片呢？現(xiàn)在，我們來給博客添加文件上傳功能，這樣我們就可以使用 markdown 來鏈接圖片了。

我們使用express的第三方中間件 multer 實現(xiàn)文件上傳功能。打開 package.json，在 dependencies 中添加：

"multer": “0.1.6"

并 npm install 安裝模塊。然后修改 app.js，添加：

var multer  = require('multer');

app.use(multer({
  dest: './public/images',
  rename: function (fieldname, filename) {
    return filename;
  }
}));

其中，dest 是上傳的文件所在的目錄，rename 函數用來修改上傳后的文件名，這里設置為保持原來的文件名。

修改 header.ejs ，在archive下一行添加：

<span><a title="上傳" href="/upload">upload</a></span>

然后打開 index.js ，在 app.get('/logout') 函數后添加如下代碼：

app.get('/upload', checkLogin);
app.get('/upload', function (req, res) {
  res.render('upload', {
    title: '文件上傳',
    user: req.session.user,
    success: req.flash('success').toString(),
    error: req.flash('error').toString()
  });
});

注意：我們設置 app.get('/upload', checkLogin); 限制只有登陸的用戶才能上傳文件。

接下來，我們在 views 文件夾下新建 upload.ejs ，添加如下代碼：

<%- include header %>
<form method='post' action='/upload' enctype='multipart/form-data' >
  <input type="file" name='file1'/><br>
  <input type="file" name='file2'/><br>
  <input type="file" name='file3'/><br>
  <input type="file" name='file4'/><br>
  <input type="file" name='file5'/><br>
  <input type="submit" />
</form>
<%- include footer %>

現(xiàn)在我們就可以訪問文件上傳頁面了。這里我們限制一次最多可以上傳 5 個文件。清空數據庫，重新注冊登錄后，上傳文件頁面如下圖：

http://wiki.jikexueyuan.com/project/express-mongodb-setup-blog/images/3.1.jpg" alt="" />

我們現(xiàn)在只是有了一個可以上傳文件的表單而已，并不能上傳文件，接下來我們添加對上傳文件的支持。

在 app.get('/upload') 后添加如下代碼：

app.post('/upload', checkLogin);
app.post('/upload', function (req, res) {
  req.flash('success', '文件上傳成功!');
  res.redirect('/upload');
});

注意：假如從桌面啟動的博客上傳圖片時失敗，嘗試在命令行中從博客根目錄下啟動。

現(xiàn)在，我們給博客添加了文件上傳功能。假如我們上傳了一張名為 lufei.jpg 的圖片，示例：

發(fā)表前

http://wiki.jikexueyuan.com/project/express-mongodb-setup-blog/images/3.2.jpg" alt="" />

發(fā)表后

http://wiki.jikexueyuan.com/project/express-mongodb-setup-blog/images/3.3.jpg" alt="" />