node+express用multer上传图片或者文件到服务器及用日期命名图片存储的文件夹。
1.要用到multer的话,那就先安装咯。
cnpm install --save multer
2.对应js的代码
var express = require('express');
var router = express.Router();
//获取时间
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
return currentdate.toString();
}
var datatime = 'public/images/'+getNowFormatDate();
//将图片放到服务器
var multer = require('multer')
var storage = multer.diskStorage({
// 如果你提供的 destination 是一个函数,你需要负责创建文件夹
destination: datatime,
//给上传文件重命名,获取添加后缀名
filename: function (req, file, cb) {
cb(null, file.originalname);
}
});
var upload = multer({
storage: storage
});
router.post('/addPicture',upload.single('picUrl'),function(req,res,next){
console.log(req.body.picTitle)//console.log(req.query.picTitle);//get
console.log(req.body.picType)
console.log(req.file)//req.file文件的具体信息
res.send({ret_code: datatime});
});
3.html中的代码
<form method="post" action="addPicture/addPicture" class="form-horizontal" enctype="multipart/form-data">
<div class="hr-line-dashed"></div>
<div class="form-group"><label class="col-sm-2 control-label">图片标题:</label>
<div class="col-sm-5">
<input type="text" name="picTitle" placeholder="必填" class="form-control" required="">
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group"><label class="col-sm-2 control-label">图片类型:</label>
<div class="col-sm-5">
<select class="form-control" name="picType">
<option value="1">gif</option>
<option value="2">图片</option>
<option value="3">美女</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group"><label class="col-sm-2 control-label">对应图片:</label>
<div class="col-sm-5"><input type="file" name="picUrl" class="form-control"></div>
</div>
<div class="form-group">
<div class="col-sm-2 col-sm-offset-9">
<h3></h3>
<button class="btn btn-primary" type="submit">提交</button>
</div>
</div>
</form>
其中enctype=”multipart/form-data”是必须的。
看看实现的效果图吧: