express + multer 文件上传入门

写在前面的

在web开发中，我们经常会遇到图片上传的功能，接下来我们就在express4.15.0框架中利用multer1.3.0模块来实现图片上传

开始敲代码

首先利用express-generator express框架生成器生成我们的项目

这里我们采用ejs模板引擎（因为我只会这个）

express -e uploads

创建好之后，目录结构如下图所示：

然后开始安装依赖并且运行

cd uploads

cnpm install

npm start

用谷歌浏览器打开http://localhost:3000,出现下图。至此，我们的express框架已经搭建完成

接下来，安装multe中间件,并且将依赖写入package.json

cnpm install multer --save

打开package.json，我们惊奇的发现多了一行

至此，我们终于搭建好环境了，正式开始编程

我们首先写一个表单提交路由

在routes文件下的index.js中，添加一个路由

router.get('/upload', function(req, res, next) {

  res.render('upload', { title: '图片上传' });

});

接下来写一个相对应的表单提交页面

注意！提交方式必须是post，同时添加属性enctype="multipart/form-data"

要不然，http协议的头信息是不对的，关于这点，可以参考这里

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css' />

  </head>

  <body>

    <h1><%= title %></h1>

    <form action="doup" method="post" enctype="multipart/form-data">

    	<p>

    		<label for="img">图片上传：</label>

    		<input type="file" value="选择图片" id="img" name="image">

    	</p>

    	<p>

    		<input type="submit" value="提交">

    	</p>

    </form>

  </body>

</html>

运行程序，结果如下图

很幸运，程序正常运行

接下来，我们需要修改app.js，引入multer模块

var multer = require('multer');

在相应的位置上添加下面语句

//将上传上来的image文件放到项目的tmp文件夹下面

//！！!特别注意：这句话必须放在

//app.use('/', index);

//app.use('/users', users);

//这两句的前面，否则后面会失败的

app.use(multer({dest: './tmp/'}).array('image'));

运行程序之后，我们又可以惊奇的发现项目中多了一个文件夹

在浏览器上传文件后，打开tmp文件夹，发现里面的多了一个文件，名字是一串乱七八糟的东西，

很懊恼，这明明不是我上传的jpg图片呀

不要着急，这里我们把文件的名字改一下

名字随便写，后缀是你上传的后缀就可以，我上传的是jpg格式的图片，

很神奇的事情发生了

我们发现这不就是我们上传的文件吗，可是难道我们必须手动更改吗

不要忘了nodejs很轻易就可以对本地文件进行操作

利用fs模块可以轻松实现这点

在routers中的index.js我们接着更改

引入fs模块

var fs = require('fs');

添加post提交路由

router.post('/doup', function (req,res,next){

	var files = req.files;

	var oldPath = files[0].destination + files[0].filename;

	var newPath = './public/uploads/' + files[0].originalname;

	console.log(newPath);

	fs.rename(oldPath, newPath, function (err) {

		if (err) {

			throw err;

		}

		res.send('success');

	});

})

运行程序，上传图片，发现图片正常上传

至此，我们的上传图片已经大功告成！

巴特西