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

须要注意的是，即便你只上传了一个文件，实际上是上传了那一个文件和四个空文件，因此咱们在上传完毕后，要检测这五个文件是否有空文件，如有，则删除空文件而且把非空文件重命名为原来的名字；若没有，只把非空文件重命名为原来的名字。