multer实现图片上传：

ejs代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>图片上传</title>

</head>

<body>

    <!--

        在终端安装：cnpm install multer

        Multer是nodejs中处理multipart/form-data数据格式(主要用在上传功能中）的中间件。该中间件不处理multipart/form-data数据格式以外的任何形式的数据

     -->

    <!-- 单张上传 -->

    <h3>单张上传</h3>

    <form action="/uploadImg/addimg" method="post" enctype="multipart/form-data">

        <input type="file" name="img" id="img1">

        <input type="submit" value="提交">

    </form>

    <!-- 多张上传 -->

    <h3>多张上传</h3>

    <form action="/uploadImg/addimgs" method="post" enctype="multipart/form-data">

        <input type="file" name="imgs" multiple id="img2">

        <input type="submit" value="提交">

    </form>

    <!-- ajax单张上传图片 -->

    <h3>ajax单张上传图片</h3>

    <input type="file" name="ajaximg" id="ajaximg">

    <input type="submit" value="提交" id="ajaxbtn">

    <!-- ajax多张上传图片 -->

    <h3>ajax多张上传图片</h3>

    <input type="file" name="ajaximg" multiple id="ajaximgs">

    <input type="submit" value="提交" id="ajaxbtns">

</body>

<script src="web/js/jquery-1.10.1.min.js"></script>

<script>

    // ajax单张上传

    $("#ajaxbtn").click(function (e) {

        // console.log($("#ajaximgs")[0].file[0])

        let file = $("#ajaximg")[0].files[0];

        let formdata = new FormData();

        formdata.append("img", file);

        // ajax单张上传

        $.ajax({

            type: "POST",//默认post

            url: "/uploadImg/addimg",//默认当前页

            data: formdata,//格式（key：value）

            contentType: false,

            processData: false,

            dataType: "json",

            beforeSend: function () { },//请求发送当前回调，常用验证

            success: function (response) {//请求成功回调

                alert("上传成功");

            },

            error: function (e) {

                if (e.statusText == "timeout") {

                    alert("请求成功");

                }

            },

            // 请求成功与否都会执行的回调

            complete: function () { }

        });

    });

    // ajax多张上传

    $("#ajaxbtns").click(function (e) {

        //  console.log($("#ajaximgs")[0].files)

        let files = $("#ajaximgs")[0].files;

        let formdata = new FormData();

        for (const file of files) {

            formdata.append("imgs", file);

        }

        // ajax单张上传

        $.ajax({

            type: "POST",//默认post

            url: "/uploadImg/addimgs",//默认当前页

            data: formdata,//格式（key：value）

            contentType: false,

            processData: false,

            dataType: "json",

            beforeSend: function () { },//请求发送当前回调，常用验证

            success: function (response) {//请求成功回调

                alert("上传成功");

            },

            error: function (e) {

                if (e.statusText == "timeout") {

                    alert("请求成功");

                }

            },

            // 请求成功与否都会执行的回调

            complete: function () { }

        });

    });

</script>

</html>

服务器代码：

// 引入模块

var express = require('express');

var fs = require("fs");

var router = express.Router();

var multer = require("multer");

// 设置上传图片的文件夹

var upload = multer({ dest: "public/uploads/" });

/* GET home page. */

router.get('/', function (req, res, next) {

    res.render("phone/uploadImg");

});

// .single(fieldname)

// 该方法接收单个上传的文件 fieldname为上传文件所用的标签name属性。上传的文件信息存储在req.file中

// 单张上传

router.post('/addimg', upload.single("img"), function (req, res) {

    let file = req.file;

    // fieldname: 上传文件标签在表单中的name

    let filename = "public/uploads/" + file.filename;

    // 判断上传的图片格式

    // mimetype：该文件的Mime type

    if (file.mimetype == "image/jpeg") {

        filename += ".jpg";

    }

    if (file.mimetype == "image/png") {

        filename += ".png";

    }

    if (file.mimetype == "image/gif") {

        filename += ".gif";

    }

    fs.renameSync(file.path, filename);

    console.log(req.file);

    // 响应

    res.json("上传成功");

});

// 多张图片上传

router.post('/addimgs', upload.array("imgs"), function (req, res) {

    let files = req.files;

    for (let file of files) {

        // fieldname: 上传文件标签在表单中的name

        let filename = "public/uploads/" + file.filename;

        // 判断上传的图片格式

        // mimetype：该文件的Mime type

        if (file.mimetype == "image/jpeg") {

            filename += ".jpg";

        }

        if (file.mimetype == "image/png") {

            filename += ".png";

        }

        if (file.mimetype == "image/gif") {

            filename += ".gif";

        }

        fs.renameSync(file.path, filename);

    }

    console.log(req.file);

    // 响应

    res.json("上传成功");

});

module.exports = router;

路由接口：

var createError = require('http-errors');

var express = require('express');

var path = require('path');

var cookieParser = require('cookie-parser');

var logger = require('morgan');

// 前端

// var indexRouter = require('./routes/index');

// var usersRouter = require('./routes/users');

// var IndexRouter = require('./routes/phone/index');

// var detailRouter = require('./routes/phone/detail');

// var newsShowRouter = require('./routes/phone/news-show');

// var newsRouter = require('./routes/phone/news');

// var otherListRouter = require('./routes/phone/other-list');

// var proListRouter = require('./routes/phone/pro-list');

// var tableRouter = require('./routes/phone/table');

var uploadImgRouter = require('./routes/phone/uploadImg');//图片上传路由

// 后台

var adminRouter = require('./routes/admin/index');

var adminMainRouter = require('./routes/admin/pages/main');

var adminDelRouter = require('./routes/admin/pages/article/del');

var adminIndexRouter = require('./routes/admin/pages/article/index');

var adminEditRouter = require('./routes/admin/pages/article/edit');

var app = express();

// view engine setup

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

app.use(logger('dev'));

app.use(express.json());

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());

// 设置public为局部变量

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);

// app.use('/users', usersRouter);

// app.use('/index', IndexRouter);

// app.use('/detail', detailRouter);

// app.use('/newsShow', newsShowRouter);

// app.use('/news', newsRouter);

// app.use('/other', otherListRouter);

// app.use('/pro', proListRouter);

// app.use('/table', tableRouter);

app.use('/uploadImg', uploadImgRouter);

// 后台

// app.use('/admins', adminRouter);

// app.use('/adminMain', adminMainRouter);

// app.use('/adminDel', adminDelRouter);

// app.use('/adminindex', adminIndexRouter);

// app.use('/adminEdit', adminEditRouter);

// catch 404 and forward to error handler

app.use(function(req, res, next) {

  next(createError(404));

});

// error handler

app.use(function(err, req, res, next) {

  // set locals, only providing error in development

  res.locals.message = err.message;

  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page

  res.status(err.status || 500);

  res.render('error');

});

module.exports = app;

　　

multer实现图片上传的更多相关文章

  1. 使用express+multer实现node中的图片上传

    使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...

  2. Nodejs进阶：基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  3. nodejs+multer+ajax文件上传

    前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method=" ...

  4. Node.js实现图片上传功能

    node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...

  5. Express+MySQL实现图片上传到服务器并把路径保存到数据库中

    demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer 先搭建服务器并展示html页面 const express = require("express ...

  6. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  7. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  8. JS图片上传预览插件制作（兼容到IE6）

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  9. HTML5笔记：跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day18 用户授权_03-方法授权-jwt令牌包含权限

    修改认证服务的UserDetailServiceImpl类,下边的代码中 permissionList列表中存放了用户的权限, 并且将权限标识按照中间使用逗号分隔的语法组成一个字符串,最终提供给Spr ...

  2. Python之queue模块以及生产消费者模型

    队列 队列类似于一条管道,元素先进先出,进put(arg),取get() 有一点需要注意的是:队列都是在内存中操作,进程退出,队列清空,另外,队列也是一个阻塞的形态. 队列分类 队列有很多中,但都依赖 ...

  3. C++ - 第一个程序

    代码: #include <iostream> using namespace std; int main() { cout << "hello!" < ...

  4. MySQL数据库表的设计和优化（上）

    一.单表设计与优化: (1)设计规范化表,消除数据冗余(以使用正确字段类型最明显):数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规范化表 ...

  5. Vidual Studio vs2013彻底卸载

    我的win10 1803 2019年年中升级的,非常后悔,持续不间断的假死状态让人很无奈.又不舍得回退,因为很多保存的隐藏数据. 开始清理系统吧,东西越少性能越好,于是电脑就成了纯净版,甚至连 看到了 ...

  6. NVIDIA显卡电源不足

    NVIDIA显卡 Ubuntu16.04安装驱动后出现问题:Unable to determine the device handle for GPUXXX 安装NVIDIA驱动后输入:nvidia- ...

  7. 搭建sqli靶场

    前言: sqli是一个印度程序员编写的,用来学习sql注入的一个游戏教程 sqli这个靶场对php7.0是不兼容的(因为一些函数在php7中被删除了),所以搭建的时候要下载php5,如果你的系统要下载 ...

  8. 最新 好未来java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 好未来等10家互联网公司的校招Offer,因为某些自身原因最终选择了 好未来.6.7月主要是做系统复习.项目复盘.Leet ...

  9. selenium + python 环境配置 （一）

    超级无敌菜鸟 终于有空学习一下python 和 selenium 啦 第一步: 环境配置  (Windows版) 1. 下载安装python 根据你的电脑,下载一个python吧   这儿装的是pyt ...

  10. 怎么让桌面存到d盘

    1.找到桌面文件夹. (C:\Users\Administrator) [C盘],[用户].[“”系统账号“(如Administrator)文件夹],[桌面] 2.打开桌面文件夹的属性. 查看位置,修 ...