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

来源:互联网 发布:红遍中国的网络神曲 编辑:程序博客网 时间:2024/06/18 17:13

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

阅读全文
0 0
原创粉丝点击