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. Mysql字段修饰符(约束)

    (1).null和not null not null不可以插入null,但可以插入空值. 数值型.字符型.日期型都可以插入null,但只有字符型可以插入空值. 使用方法如下: mysql> cr ...

  2. (五)AJAX技术

    一.定义 AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的 ...

  3. iOS-UIStoryboard和UIResponder

    6.17 UIStoryboard //获取someboard中InitialViewController UIStoryboard *story = [UIStoryboard storyboard ...

  4. sonar:windows重启sonar

    登录后操作

  5. sql 索引【转】

    T-SQL查询进阶--理解SQL Server中索引的概念,原理以及其他   简介 在SQL Server中,索引是一种增强式的存在,这意味着,即使没有索引,SQL Server仍然可以实现应有的功能 ...

  6. git推送远程仓库以及分支介绍

    1.介绍 我们要把本地仓库的项目推送到远程服务器,首先我们得有自己的服务器,一般我们选择码云和github,码云和github的操作差不多,今天我们再次介绍码云的使用 2.码云的使用 第一步:首先我们 ...

  7. 【ARM-Linux开发】【QT开发】Couldnt load module input, no modules loaded

    export TSLIB_FBDEVICE=/dev/fb0 export TSLIB_PLUGINDIR=/usr/lib/ts  (input.so 所在目录)

  8. 【计算机视觉】Objectness算法(一)---总体理解,整理及总结

    1.源码下载及转换为VS2012 WIN32版本. http://www.cnblogs.com/larch18/p/4560690.html 2.原文: http://wenku.baidu.com ...

  9. 【MySQL】IN 的学习,以及和 EXISTS的区别

    1. EXISTS 的语法 语法: EXISTS subquery 参数: subquery 是一个受限的 SELECT 语句 (不允许有 COMPUTE 子句和 INTO 关键字). 结果类型: B ...

  10. codevs1227:方格取数2

    题目描述 Description 给出一个n*n的矩阵,每一格有一个非负整数Aij,(Aij <= )现在从(,)出发,可以往右或者往下走,最后到达(n,n),每达到一格,把该格子的数取出来,该 ...