multer实现图片上传
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实现图片上传的更多相关文章
- 使用express+multer实现node中的图片上传
使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...
- Nodejs进阶:基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- nodejs+multer+ajax文件上传
前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method=" ...
- Node.js实现图片上传功能
node接口实现 const express = require('express') const mysql = require('mysql') const cors = require('cor ...
- Express+MySQL实现图片上传到服务器并把路径保存到数据库中
demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer 先搭建服务器并展示html页面 const express = require("express ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
随机推荐
- Facebook libra开发者文档- 3 -Life of a Transaction交易生命周期
Life of a Transaction交易的生命周期 https://developers.libra.org/docs/life-of-a-transaction 为了更深入地了解Libra交易 ...
- 一个漂亮的输出MySql数据库表结构的PHP页面
经常为了方便和直观,我们会首先直接在数据库中设计出表,但是接下来又要将表的结构和设计编写在设计文档中,以便编码的时候可以直观的查询,一旦数据库表非常多,字段非常多的时候,这无疑是件非常郁闷的工作. 这 ...
- bat 脚本之 使用函数
bat 脚本之 使用函数 摘自:https://blog.csdn.net/peng_cao/article/details/73999076 2017年06月30日 15:06:37 pengcao ...
- Python命令行参数解析模块getopt使用实例
Python命令行参数解析模块getopt使用实例 这篇文章主要介绍了Python命令行参数解析模块getopt使用实例,本文讲解了使用语法格式.短选项参数实例.长选项参数实例等内容,需要的朋友可以参 ...
- FastCGI模式下安装Xcache
PHP执行的时候,会被编译成opcode,然后 zend引擎会执行opcode.也就是说,如果你两次执行同一个php程序,每次执行,他都要把php代码编译成opcodexcache的意义在于,当你第一 ...
- node节点扩容
node节点扩容: 安装docker 部署 kubelet组件 拷贝admin.conf 拷贝bootstrap.conf 安装cni网络插件 拷贝ca.pem 证书,配置kubelet-config ...
- pycharm操作Django基础部分
原文地址:https://www.cnblogs.com/feixuelove1009/p/5823135.html
- 游戏协议模拟测试工具(TcpEngine)使用简介
功能介绍 在有的网络开发需要走二进制流协议场景,比如网络游戏开发,在开发阶段,前端和后端协商好协议后就分别开发.在开发写代码的时候,有时需要对端发送一条完整的协议过来触发一下自己的代码,进行单步调试或 ...
- JWT(JSON Web Tokens)操作帮助类
载荷实体: /// <summary> /// JWT载荷实体 /// </summary> public sealed class JWTPlayloadInfo { /// ...
- php iconv实现编码转换
php iconv实现编码转换 <pre><?php $content = iconv('GB2312', 'UTF-8//IGNORE', $content); ?> < ...