基於express的bodyParser() 解析請求體實現文件上傳功能

基於express的bodyParser() 解析請求體實現文件上傳功能

一個完整的博客怎麼能缺乏圖片呢？如今，咱們來給博客添加文件上傳功能，這樣咱們就可使用 markdown 來連接圖片了。

上傳文件目前有三種方法：

• 使用 Express 自帶的文件上傳功能，不涉及數據庫

• 使用 Formidable 外部模塊，不涉及數據庫

• 上傳到 MongoDB ，涉及數據庫

第一個方法最簡單，因此咱們就用第一個來實現咱們想要的功能吧。Express 經過 bodyParser() 解析請求體，咱們可使用 bodyParser() 來實現上傳文件的功能，其實 bodyParser() 內部就是使用了 formidable ，只不過多了一層封裝而已。

打開 header.ejs ，在 <span><a title="發表" href="/post">post</a></span> 前添加一行代碼：

<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 %>

如今咱們就能夠訪問文件上傳頁面了。這裏咱們限制一次最多能夠上傳 5 個文件。清空數據庫，從新註冊登陸後，上傳文件頁面以下圖：

咱們如今只是有了一個能夠上傳文件的表單而已，並不能上傳文件，接下來咱們添加對上傳文件的支持。

打開 app.js ，將 app.use(express.bodyParser()); 修改成：

app.use(express.bodyParser({ keepExtensions: true, uploadDir: './public/images' }));

以上代碼的意思是：保留上傳文件的後綴名，並把上傳目錄設置爲 /public/images （咱們主要用來上傳圖片）。

打開 index.js ，在 crypto = require('crypto') 後添加一行代碼：

fs = require('fs'),

在 app.get('/upload') 後添加以下代碼：

app.post('/upload', checkLogin);
app.post('/upload', function (req, res) {
  for (var i in req.files) {
    if (req.files[i].size == 0){
      // 使用同步方式刪除一個文件
      fs.unlinkSync(req.files[i].path);
      console.log('Successfully removed an empty file!');
    } else {
      var target_path = './public/images/' + req.files[i].name;
      // 使用同步方式重命名一個文件
      fs.renameSync(req.files[i].path, target_path);
      console.log('Successfully renamed a file!');
    }
  }
  req.flash('success', '文件上傳成功!');
  res.redirect('/upload');
});

須要注意的是，即便你只上傳了一個文件，實際上是上傳了那一個文件和四個空文件，因此咱們在上傳完畢後，要檢測這五個文件是否有空文件，如有，則刪除空文件而且把非空文件重命名爲原來的名字；若沒有，只把非空文件重命名爲原來的名字。