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. zblog模板怎么安装？zblog主题安装教程

    有很多初次使用zblog的新手还会问我“zblog模板怎么安装?”,那么本文就专门给大家介绍下zblog主题安装教程. zblog现在分为zblogasp和zblogphp两个版本,两个版本的模板主题 ...

  2. 阶段5 3.微服务项目【学成在线】_day08 课程图片管理 分布式文件系统_06-分布式文件系统研究-fastDFS安装及配置文件说明

    3 fastDFS入门 3.1fastDFS安装与配置 3.1.1 导入虚拟机 对fastDFS的安装过程不要求学生掌握,可以直接导入老师提供虚拟机. 1.使用Vmware打开虚拟机配置文件“Cent ...

  3. 迭代器iterator-生成器generator

    1. 迭代 根据记录的前面的元素的位置信息 去访问后续的元素的过程 -遍历 迭代 2. 可迭代对象 iterable 如何判断可迭代对象的3种方式 能够被迭代访问的对象 for in 常用可迭代对象- ...

  4. （八）UML之状态图

    一.概念 状态图(Statechart Diagram)主要用于描述一个对象在其生存期间的动态行为,表现为一个对象所经历的状态序列,引起状态转移的事件(Event),以及因状态转移而伴随的动作(Act ...

  5. win10 1803 频繁死机，卡死不动

    摘自微软官网的解决办法,我的目测好像是可以了. 小娜搜索框输入“PowerShell”选择在管理员命令提示符下键入以下命令: Dism /Online /Cleanup-Image /ScanHeal ...

  6. 【VS开发】Windows平台下Makefile学习笔记

    作者:朱金灿 来源:http://blog.csdn.net/clever101 决心学习Makefile,一方面是为了解决编译开源代码时需要跨编译平台的问题(发现一些开源代码已经在使用VS2010开 ...

  7. 原装win8系统电脑崩溃问题解决

    原装win8系统电脑崩溃问题解决 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:之所以撰写本篇关于win8原装系统电脑崩溃的博文,一是要吐槽一下原装w ...

  8. csu 1909: Perfect Chocolate

    1909: Perfect Chocolate Submit Page   Summary   Time Limit: 3 Sec     Memory Limit: 128 Mb     Submi ...

  9. 国产龙芯服务器源码安装PostgreSQL数据库的方法

    1. 公司最近有一些国产化项目的需求, 要求在国产CPU的服务器上面安装pg数据库等. 2.. 但是差查了下中标麒麟的官网,在龙芯MIPS的操作系统包源里面仅有 postgreSQL 9.2 版本的r ...

  10. 详解Cookie、Session和缓存

    1 Cookie和Session Cookie和Session都为了用来保存状态信息,都是保存客户端状态的机制,它们都是为了解决HTTP无状态的问题而所做的努力. Session可以用Cookie来实 ...