利用中间件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处理图片文件上传