利用中间件Multer实现上传功能

Multer中间件实现对multipart/form-data格式的数据的操作

现在实现上传图片的功能，上传文件完成后，背景图片显示上传的图片

首先在html文件中添加文件上传标签

<input type="file" id="file" name="files" />

创建upload.js文件，定义ajax上传文件的方法。这里运用了XHR2的FormData对象。FormData对象可以发送二进制文件，并且可以在没有表单的情况下模拟表单的提交

upload.js文件中的内容如下

var filenode = document.getElementById("file");
filenode.onchange=function(){
var xhr=new XMLHttpRequest();
//设置回调，当请求的状态发生变化时，就会被调用
xhr.onreadystatechange = function () {
//等待上传结果,将背景图像设置为tx2.jpg
if (xhr.readyState == 1) {
filenode.parentNode.style.backgroundImage = "url('/images/tx2.jpg')";
}
//上传成功，返回的文件名，设置到父节点的背景中
if (xhr.readyState == 4 && xhr.status == 200) {
var path=JSON.parse(xhr.responseText).path.split("\\");
filenode.parentNode.style.backgroundImage = "url('./uploads/" +path[path.length-1]+ "')";
}
}

//构造form数据
var data= new FormData();
data.append("files", filenode.files[0]);

//设置请求，true：表示异步
xhr.open("post", "/upload1", true);
//不要缓存
//xhr.setRequestHeader("If-Modified-Since", "0");
//提交请求
xhr.send(data);
//清除掉，否则下一次选择同样的文件就进入不到onchange函数中了
filenode.value = null;
}

利用上传文件的中间件Multer对上传的图像进行处理。首先创建Multer对象，并通过storage对对象进行设置，将其保存在multerUtil文件中

var  multer=require('multer');
var storage = multer.diskStorage({
//设置上传后文件路径，uploads文件夹会自动创建。
destination: function (req, file, cb) {
cb(null, './public/uploads')
},
//给上传文件重命名，获取添加后缀名
filename: function (req, file, cb) {
var fileFormat = (file.originalname).split(".");
cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
});
//添加配置文件到multer对象。
var upload = multer({
storage: storage
});

//如需其他设置，请参考multer的limits,使用方法如下。
//var upload = multer({
//    storage: storage,
//    limits:{}
// });

//导出对象
module.exports = upload;

引入multer模块，处理ajax的请求，返回上传后的文件信息，将其保存在test.js文件夹下

var muilter = require('./multerUtil');
//multer有single()中的名称必须是表单上传字段的name名称。
var upload=muilter.single('files');
exports.dataInput = function (req, res) {
upload(req, res, function (err) {
//添加错误处理
if (err) {
return  console.log(err);
}
//文件信息在req.file或者req.files中显示。
res.send(req.file);

});
}

在路由文件中添加路由，ajax请求发出后触发该路由。

var testController=require("../model/test");
module.exports = function(app) {
app.post('/upload1',testController.dataInput);
}

至此，文件上传功能实现

参考文献：express文件上传中间件Multer最新使用说明

nodejs处理图片文件上传