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

Posted Yuity

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的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‘)函数后添加如下代码:

 1 //上传文件页路由
 2 router.get(‘/upload‘, checkLogin);    //限定只有登录的用户才能上传文件
 3 router.get(‘/upload‘, function(req, res) {
 4     res.render(‘upload‘, {
 5         title: ‘文件上传‘,
 6         user: req.session.user,
 7         success: req.flash(‘success‘).toString(),
 8         error: req.flash(‘error‘).toString()
 9     });
10 });

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

 1 <div class=‘container‘>
 2     <h2>文件上传</h2>
 3     <hr/>
 4     <form enctype="multipart/form-data" method="post" action="/upload" class="form-horizontal">
 5         <div class="form-group">
 6           <label for="file1">文件输入</label>
 7           <input type="file" name="file1">
 8        </div>
 9        <div class="form-group">
10           <label for="file1">文件输入</label>
11           <input type="file" name="file1">
12        </div>
13        <div class="form-group">
14           <label for="file1">文件输入</label>
15           <input type="file" name="file1">
16        </div>
17        <button type="submit" class="btn btn-primary">上传</button>
18    </form>
19 </div>

  2.4 然后,修改app.js,添加如下代码:

 1 var multer  = require(‘multer‘);
 2 // 文件上传插件
 3 var storage = multer.diskStorage({
 4   destination: function (req, file, cb) {
 5     cb(null, ‘./public/images/user‘)
 6   },
 7   filename: function (req, file, cb) {
 8     cb(null, file.fieldname + ‘-‘ + Date.now())
 9   }
10 });
11 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‘);
});

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

 

以上是关于一个简单的blog系统 增加文件上传功能的主要内容,如果未能解决你的问题,请参考以下文章

寒假随笔4——购物系统(web文件上传与下载)

一个简单的blog系统(十四) 增加用户头像

Git 如何上传文件夹

在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途

Spring Boot关于上传文件例子的剖析

Flask blog实战---上传头像功能