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. Oracle查看表结构的方法【我】

    Oracle查看表结构的方法   方法一: 在命令窗口下输入   DESC table_name;  回车       方法二: 在sql窗口下   SELECT DBMS_METADATA.GET_ ...

  2. Qt编写自定义控件37-发光按钮（会呼吸的痛）

    一.前言 这个控件是好早以前写的,已经授权过好几个人开源过此控件代码,比如红磨坊小胖,此控件并不是来源于真实需求,而仅仅是突发奇想,类似于星星的闪烁,越到边缘越来越淡,定时器动态改变边缘发光的亮度,产 ...

  3. 一百四十六：CMS系统之帖子按照发布时间和评论数量排序

    按照不同选项进行排序 视图 @bp.route('/')def index(): board_id = request.args.get('board_id', type=int, default=N ...

  4. python 中 staticmethod 和 classmethod有什么区别

    面试中经常会问到staticmethod 和 classmethod有什么区别? 首先看下官方的解释: staticmethod: class staticmethod staticmethod(fu ...

  5. Python基础之内置函数（二）

    先上一张图,python中内置函数: python官方解释在这:点我点我 继续聊内置函数: callable(object):检查对象是否可被调用,或是否可执行,结果为bool值 def f1(): ...

  6. Python - Django - 使用 Bootstrap 样式修改书籍列表

    展示书籍列表: 首先修改原先的 book_list.html 的代码: <!DOCTYPE html> <!-- saved from url=(0042)https://v3.bo ...

  7. 【AI教育】可以看看行业痛点分析

    http://www.woshipm.com/it/2801582.html 至于解决方案嘛,还在堆砌技术的阶段.

  8. django模板--条件控制标签

    条件控制标签 在django模板中可以通过条件控制标签进行逻辑控制,条件控制标签的语法如下: {% if condition1 %} ... {% elif condition2 %} ... {% ...

  9. laravel原生sql

    转自:https://www.cnblogs.com/zouzhe0/p/6307077.html DB::insert(, ']); $user = DB::]); //我们还 可以看到在执行查询的 ...

  10. node.js连接DB2实现fetchRows一行一行获取sql的源码

    参见程序中的queryResult那部分: /* * This example demonstrates how to fetch a single row from a large table * ...