服务端代码:
var express = require('express'); var swig = require('swig'); //1、引入multer模块 var multer = require('multer'); var fs = require('fs'); var path = require('path'); var redis = require('./modules/redis'); var app = express(); app.use(express.bodyParser()); //设置swig模板方法; app.engine('html', swig.renderFile); app.set('view engine', 'html'); app.set('views', __dirname + '/views'); // Using Multer for file uploads. //2、配置multer中间件参数; app.use(multer({ dest: './uploads/'})); //3、设置路由参数,原理就是通过第2步中的中间件后,req.files会带上传过来的图片信息; app.post('/form',function(req,res){ //console.log(req.files.image); // 上传的文件信息 //console.log(req.body); //console.log(req.files); var des_file = __dirname + "/uploads/" + req.files.image.originalFilename; console.log(__dirname); console.log(req.files.image.originalFilename); console.log(des_file); //4、图片上传进来后,被保存在内存路径中(个人理解,很重要,姑且这样理解); fs.readFile( req.files.image.path, function (err, data) { console.log(data) //5、通过fs模块读取图片保存的内存路径,并将图片读出的信息,保存到设置好的目录里; fs.writeFile(des_file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'File uploaded successfully', filename:req.files.image.originalFilename }; } //console.log( response ); res.end( JSON.stringify( response ) ); }); }); }); app.post('/',function(req,res){ if(!(req.body.owner&&req.body.type&&req.body.content)){ if(req.body.type&&(["male","female"].indexOf(req.body.type) === -1)){ return res.json({code:0,msg:"类型错误"}) } return res.json({code:0,msg:"信息不完整"}) } redis.throw(req.body,function(result){ res.json(result); }) }); app.get('/',function(req,res){ console.log(req.query); if(!req.query.user){ return res.json({code:0,msg:"信息不完整"}); } if(req.query.type && (["male","female"].indexOf(req.query.type) === -1)){ return res.json({code:0,msg:"类型错误"}); } redis.pick(req.query,function(result){ res.json(result); }) }); app.get('/form',function(req,res){ res.render('form'); }); //require("./test/test.js").b(); // // //require("./test/test.js").a(); //var cc = require("./test/test"); //cc.b(); //cc.a(); app.listen(3000);
前端form表单代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--form若是上传图片必须带上这个属性 enctype="multipart/form-data"--> <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="owner" value="123131414"/> <input type="file" name="image"/> <input type="submit" value="上传文件" /> </form> </body> </html>
最重要的一点是:
<input type="file" name="image"/>
必须加上 name="image"
必须加上 name="image"
必须加上 name="image"
重要的事情说三遍