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. Linux给力的Shell命令

    查看目录下面的所有目录 ls /dev/ -F |grep "/"   bus/    disk/    input/  说明: ls -F命令将文件和目录后面添加一个特定的符号; ...

  2. VS2015编译gdal库 debug

    nmake -f makefile.vc DEBUG=1nmake /f makefile.vc installnmake /f makefile.vc devinstal E:\Visual Stu ...

  3. iOS 将一个UIImage缩放到指定Size

    这方法挺实用的,直接调用就可以得到想要的size. //将一个UIImage缩放变换到指定Size -(UIImage*) OriginImage:(UIImage *)image scaleToSi ...

  4. Cognos Framework操作记录

    备注:这是我单位内部的Cognos Framework配置记录,里面涉及的名字等信息在其他使用环境需要进行相应修改. Cognos数据包配置 打开CYFTest项目, 右键点击andwdb的物理视图 ...

  5. Java解压tar.Z文件（使用Apache Commons-compress）

    这里使用apache commons compress对.tar.Z格式文件进行解压. 对于一个文件test.tar.Z,我们可以将解压过程理解为: 将test.tar.Z解压为test.tar: 将 ...

  6. Python3之返回函数

    参考:https://www.cnblogs.com/mzc1997/p/7641995.html Python中函数不仅可以作为参数还可以作为结果返回 >>> def pro1(c ...

  7. dos下通过命令访问url网址

    psexec.exe工具: https://blog.csdn.net/feier7501/article/details/8841756 https://www.cnblogs.com/boltki ...

  8. 如何使用CLI命令行部署VMware VCSA 6.5

    在本文中,我们讨论如何使用CLI部署VMware vCSA 6.5,vCSA 6.0提供了两种实现类型,向导和脚本化.我们将使用一个名为vcsa-deploy的实用程序进行CLI安装.同样vcsa-d ...

  9. AMD, CMD, CommonJS和UMD

    我的Github(https://github.com/tonyzheng1990/tonyzheng1990.github.io/issues),欢迎star 今天由于项目中引入的echarts的文 ...

  10. Jenkins+MSbuild+SVN实现快速搭建.net持续集成环境(构建、编辑、部署到服务器)

    Jenkins是一个可扩展的持续集成引擎,Jenkins非常易于安装和配置,简单易用,下面开始搭建.net持续集成环境 Jenkins和SVN安装这里就不介绍了 一.准备工作 1.Jenkins中系统 ...