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. 放射渐变RadialGradient

    public RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, TileM ...

  2. linux/videodev.h: No such file or directory错误解决方法

    sudo apt-get install libv4l-dev* file yum install libv4l-dev* yum install libv4l-dev* 上面错误的问题是两个2.4以 ...

  3. 阶段5 3.微服务项目【学成在线】_day18 用户授权_07-动态查询用户权限-权限数据模型

    3 动态查询用户权限 3.1 需求分析 截至目前在测试授权时使用的权限数据是静态数据,正常情况的流程是: 1.管理员给用户分配权限,权限数据写到数据库中. 2.认证服务在进行用户认证时从数据库读取用户 ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_10-SpringSecurityOauth2研究-校验令牌&刷新令牌

    3.5校验令牌 Spring Security Oauth2提供校验令牌的端点,如下: Get: http://localhost:40400/auth/oauth/check_token?token ...

  5. HashSet的实现原理，简单易懂

    HashSet的实现原理,简单易懂   答: HashSet实际上是一个HashMap实例,都是一个存放链表的数组.它不保证存储元素的迭代顺序:此类允许使用null元素.HashSet中不允许有重复元 ...

  6. OpenStack Magnum项目简介

    1 项目简介 Magnum是OpenStack中一个提供容器集群部署的服务. Magnum是一个Pass层的OpenStack项目. Magnum使用Heat部署一个包含Docker和Kubernet ...

  7. Release报错Debug无错

    代码在Release模式下会crash,Debug模式下可以运行,最后定位到原因 for (size_t j = 0; j < ids.size()-1; ++j) { } 发现问题是Relea ...

  8. （十六）Centos之安装mysql

    第一步:获取mysql YUM源 进入mysql官网获取RPM包下载地址 https://dev.mysql.com/downloads/repo/yum/ 点击 下载 右击 复制链接地址 https ...

  9. Azure AADSTS7000215 其中一种问题的解决

    众所周知,Azure提供了整套的rest api,经过认证和授权,完美阐述了”我是谁,我能做什么“.对资源层的操作,我们很多时候是使用Powershell或者Azure CLI或者各个语言的SDK, ...

  10. CentOS 7 vi常用命令

    用vi打开一个yum文件 vi /usr/bin/yum 按 i 键后  进入insert模式,进入insert模式后才能进行修改 修改完成后 按esc键进入command模式, 然后:wq 保存文件 ...