基于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');
});

需要注意的是，即使你只上传了一个文件，其实是上传了那一个文件和四个空文件，所以我们在上传完毕后，要检测这五个文件是否有空文件，若有，则删除空文件并且把非空文件重命名为原来的名字；若没有，只把非空文件重命名为原来的名字。