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

左手的ㄟ右手 2022-06-03 04:37 226阅读 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”是必须的。  
看看实现的效果图吧：  
![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220603/dc83b525a23d483aae935fe12142ede2.png
[SouthEast 1]: /images/20220603/be6bffffa2194a1c82917e028da83046.png
[SouthEast 2]: /images/20220603/410dc3eb270141eabf2cbcc5f3181971.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui 上传图片文件到钉钉服务器

layui上传 layui版本项目引入页面引入 java后台接收参考文献 layui版本

桃扇骨/ 2023年07月21日 11:07/ 0 赞/ 19 阅读

相关前端上传图片文件到服务器 COS

平时前端上传图片都会要后端中转一下发送给资源服务器再返回路径给前端，这样势必影响效率。在开发中前端是可以直接上传资源文件到服务器上的，只不过服务器密钥（下文中Secre

柔情只为你懂/ 2023年01月15日 11:26/ 0 赞/ 220 阅读

相关上传图片文件到服务器上,Java如何实现上传文件图片到服务器

Java如何实现上传文件图片到服务器发布时间：2021-07-24 11:02:12 来源：亿速云阅读：58 作者：小新这篇文章主要介绍Java如何实现上传文件

深碍√TFBOYSˉ_/ 2022年09月04日 06:54/ 0 赞/ 324 阅读

相关 vue上传图片文件到服务器,10秒带你实现图片上传到服务器

原生上传图片到服务器上次给大家分享过下面的文章结合element-ui上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件

╰+攻爆jí腚メ/ 2022年09月02日 14:50/ 0 赞/ 507 阅读

相关使用Jersey + SpringMVC 上传图片到图片服务器

> 实际项目中可能要用到单独的文件服务器，这时候可以使用jersey上传文件的方法达到分离文件服务器和主服务器。于是通过查询资料以及不断尝试，终于走出了这个图片上传一直报错的

心已赠人/ 2022年06月18日 05:29/ 0 赞/ 310 阅读

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

node+express用multer上传图片或者文件到服务器及用日期命名图片存储的文件夹。 1.要用到multer的话,那就先安装咯。 cnpm install

左手的ㄟ右手/ 2022年06月03日 04:37/ 0 赞/ 227 阅读

相关原生多图片上传,图片写入服务器文件

前端 <form action="jieshou.php" method="post" enctype="multipart/form-data"> <

Love The Way You Lie/ 2022年03月24日 15:54/ 0 赞/ 249 阅读

相关 java 代码jodd 上传图片到文件服务器

今天项目需要上传图片到文件服务器，使用的是jodd,特做记录 1.导入依赖 <dependency> <groupId>org.jodd</group

迈不过友情╰/ 2022年01月27日 05:11/ 0 赞/ 370 阅读

相关 express上传图片之——multer一

老步骤，安装、引用。 npm install multer let multer = require("multer"); let sto

墨蓝/ 2021年11月23日 04:52/ 0 赞/ 310 阅读

相关 vue中通过multer上传图片到express服务器、单个文件下载、批量文件下载

首先在express中安装multer cnpm i -S multer express项目结构 ![20200905115404356.png][] u

男娘i/ 2021年07月25日 15:46/ 0 赞/ 985 阅读