node+express用multer上传图片或者文件到服务器及用日期命名图片存储的文件夹

14 篇文章 5 订阅
2 篇文章 0 订阅

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”是必须的。
看看实现的效果图吧:
这里写图片描述
这里写图片描述
这里写图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值