技术标签： multipart/form-data Node 文件上传 multer
multer是node.js的一个中间件，主要是用于处理multipart/form-data类型的表单数据，而且multer不会处理任何非multipart/form-data类型的请求。在使用express框架，进行网络请求时，传输的数据类型可能会是multipart/form-data，为了解析获取数据，需要使用中间件multer,而且multer组件只会解析content-type为multipart/form-data，这中数据请求，一般会分为两种，一种时普通的数据请求，不存在附件传输，第二种，就是存在附件上传。
在使用multer中间件时，需要使用npm 进行安装，cd 到项目目录下，使用命令行 npm install multer --save
首先提交表单数据，可以使用HTML中的form表单的形式，下面是前端展示页面:
<html>
<head>
</head>
<body>
<h3>单张图上传</h3>
<form action="/singlePicture/Upload" method="post" enctype="multipart/form-data">
<h2>单图上传</h2>
<input type="file" name="logo">
<input type="submit" value="提交">
</form>
<h3>多张图片上传</h3>
<form action="/uploadFile/double" method="post" enctype="multipart/form-data">
<input type="file" name="logo" multiple>
<input type="submit" value="提交">
</form>
<h3>多张图的上传上传 同时传力多个控件上传</h3>
<form action="/uploadFile/FieldsImg" method="post" enctype="multipart/form-data">
<input type="file" name="logo" value='' multiple>
<input type="file" name="text" value='' multiple>
<input type="submit" value="提交">
</form>
<h3>文件上传 any接收方式</h3>
<form action="/upLoad/Any" method="post" enctype="multipart/form-data">
<input type="file" name="logo" value='' multiple>
<input type="file" name="text" value='' multiple>
<input type="submit" value="提交">
</form>
<body>
</html>在上传时需要后端的支持
var express = require('express');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var multer = require('multer');
var path = require('path');
var underscore = require('underscore');
var fs = require('fs');
var app = express();
//使用cookie-parser
//app.use(cookieParser());
//post 请求参数解析
//app.use(bodyParser.json());//JSON格式的解析
//app.use(bodyParser.raw());// buffer处理
//app.use(bodyParser.text());// 字符串处理
//app.use(bodyParser.urlencoded(
//{
// extended: true,
// limit: 2*1024*1024, //限制-2M
// type:'application/x-www-form-urlencoded'
// }
// ));//urlencoded
//app.use(multer({dest:'./www/Imgs'}).any());//支持任何类型的传输 可以是单图 也可以是多图
//单图传输 在单图传输时，可以使用req.file获取单个的附件文件 1)multer处理之后的数据格式为Json字典格式 2）传输的附件个数不能超过一个 3)input元素的name属性必须要和single('标记')中的标记一样
/**
*
{
"fieldname": "logo",
"originalname": "11.jpg",
"encoding": "7bit",
"mimetype": "image/jpeg",
"destination": "./www/Imgs",
"filename": "c8bf8e4cee125d37f26212105816c39f",
"path": "www/Imgs/c8bf8e4cee125d37f26212105816c39f",
"size": 157606
}
*
**/
//app.use(multer({dest:'./www/Imgs'}).single('logo'));
//多图传输 最大的传输附件个数 传输的附件个数 前端只能传输小于等于 设置的附件个数 multer处理之后的数据样式为数组
/**
*[
{
"fieldname": "logo",
"originalname": "1307076-d6b4f8a17017dd28.png",
"encoding": "7bit",
"mimetype": "image/png",
"destination": "./www/Imgs",
"filename": "d3433e2e6eb4d0b196fcc74a3c7ad81c",
"path": "www/Imgs/d3433e2e6eb4d0b196fcc74a3c7ad81c",
"size": 152549
},
{
"fieldname": "logo",
"originalname": "1684607-34b296a3458bedc7.png",
"encoding": "7bit",
"mimetype": "image/png",
"destination": "./www/Imgs",
"filename": "49e099645355f26681a85fe5cbac0409",
"path": "www/Imgs/49e099645355f26681a85fe5cbac0409",
"size": 8637
}
]
*
*/
//app.use(multer({dest:'./www/Imgs'}).array('logo',2));
//多组类型的传输 maxCount 代表最大的传输附件的个数
/*
*
*[
[
{
"fieldname": "logo",
"originalname": "1684607-34b296a3458bedc7.png",
"encoding": "7bit",
"mimetype": "image/png",
"destination": "./www/Imgs",
"filename": "5f42e9c390e91b106d5f16f809f62885",
"path": "www/Imgs/5f42e9c390e91b106d5f16f809f62885",
"size": 8637
},
{
"fieldname": "logo",
"originalname": "1684607-fd11ea7d9b0fc3c5.png",
"encoding": "7bit",
"mimetype": "image/png",
"destination": "./www/Imgs",
"filename": "246fb195d84d056ce8f38d07ec806253",
"path": "www/Imgs/246fb195d84d056ce8f38d07ec806253",
"size": 72879
}
],
[
{
"fieldname": "text",
"originalname": "2019年绩效考核-4月-客户端.xlsx",
"encoding": "7bit",
"mimetype": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"destination": "./www/Imgs",
"filename": "7918d6272d166309a23c2240a4e9562f",
"path": "www/Imgs/7918d6272d166309a23c2240a4e9562f",
"size": 23502
},
{
"fieldname": "text",
"originalname": "testApp.html",
"encoding": "7bit",
"mimetype": "text/html",
"destination": "./www/Imgs",
"filename": "fe3d6edc83fea5f0fcbef349a7d1ce5f",
"path": "www/Imgs/fe3d6edc83fea5f0fcbef349a7d1ce5f",
"size": 4487
}
]
]
*
*/
app.use(multer({dest:'./www/Imgs'}).fields([{name:'logo', maxCount:2},{name:'text', maxCount:2}]));
// 不接受文件上传 只是一个普通的post请求 只不过传输的数据样式是 multipart/form-data
//app.use(multer().none());
//存储磁盘
/*
var storage = multer.diskStorage({
//文件保存的路径 这个必须要是 自己手动提前创建好的 不能动态的创建
destination: function (req, file, cb) {
//req 网络请求的对象 file 传输过来的文件
var userid = req.body.userid;
userid ='张辉';
var filepath = path.join(__dirname,'./www/Imgs');
if (!fs.existsSync(filepath)) {
fs.mkdirSync(filepath);
};
console.log('文件路径'+filepath);
cb(null,filepath)
},
filename: function (req, file, cb) {
//filename 是指定保存的文件的名字 req 网络请求的对象 file 传输过来的文件
console.log(file.originalname+'文件的原始的名字');
cb(null, file.fieldname + '-' + Date.now())
}
});
app.use(multer({storage:storage}).any());
*/
app.get('/testGetRequest',function(req,res){
//var expires = getDateAfter();
var expires = new Date('2019-05-20 14:45:00');
var SCNcookie = req.cookies.SCN;
console.log('SCN'+SCNcookie);
console.log(expires+'过期时间');
res.cookie('SCN','app',{maxAge:1000*3600*24*7,secure:false,path:'/'});
res.send('hello world');
console.log(req.cookie+'cookie内容');
console.log(req.body+'body请求内容');
res.end('clear cookie');
});
var server = app.listen(8081,function(){
var host = server.address().address;
var port = server.address().port;
console.log('IP地址'+host+'端口'+port);
console.log('启动成功');
});
//删除Cookie
app.get('/deleteCookie',function(req,res){
res.clearCookie('SCN');
res.end('clearCookie');
});
//post请求
app.post('/getPostRequest',function(req,res){
console.log(req.body+"请求体的内容");
console.log(JSON.stringify(req.body)+"解析成字符串");
console.log(req.body.scn+"请求体的内容SCN");
res.send({"code":'200','msg':"成功"});
res.end();
});
//单张的图片上传
app.post('/singlePicture/Upload',function(req,res){
var uploadFile = req.file;
console.log(JSON.stringify(uploadFile));
var fileName = uploadFile.path+path.parse(uploadFile.originalname);
fs.rename(uploadFile.path,fileName,function(err){
if (err) {
res.send({'code':'300'});
}else{
res.send(req.file);
};
res.end();
});
});
//多张图片上传
app.post('/uploadFile/double',function(req,res){
for(var i in req.files){
var originfile = req.files[i];
var newName = originfile.path+path.parse(originfile.originalname).ext;
fs.rename(originfile.path,newName,function(err){
if(err) {
res.send({"code":"300"});
res.end();
}else{
if (i==req.files.length-1) {
//res.send({"code":"200"});
res.send(req.files);
res.end();
};
};
});
}
});
//多张图片上传 多个filed支持
app.post('/uploadFile/FieldsImg',function(req,res){
var fileValues = underscore.values(req.files);
console.log(JSON.stringify(fileValues));
res.send(fileValues);
res.end();
});
//any
app.post('/upLoad/Any',function(req,res){
res.send(req.files);
res.end();
});
//post的post请求 format data
app.post('/normalFormData/Request',function(req,res){
res.send({'code':'200'});
res.end();
});
app.get('/form', function(req, res, next){
var form = fs.readFileSync('./formsingle.html', {encoding: 'utf8'});
res.send(form);
res.end();
});
//获取日期
function getDateAfter(){
return new Date(new Date().getTime()+1000*24*3600*7).Format('yyyy-MM-dd HH:mm');
}在multer处理之后的数据格式中，对应的键值含义如下
{
"fieldname": "logo", ->标示的键值 即input标签元素 和multer.single('标示')约定的标示
"originalname": "11.jpg",->传输之前的图片名字
"encoding": "7bit", ->文件的编码类型
"mimetype": "image/jpeg",->文件的格式
"destination": "./www/Imgs", ->存储的资源路径
"filename": "c8bf8e4cee125d37f26212105816c39f",->存储的资源名字
"path": "www/Imgs/c8bf8e4cee125d37f26212105816c39f",->存储之后的附件路径
"size": 157606 ->附件的大小
}遇见的坑记录:
1.最初使用的multer 版本 @0.1.8，而最新的版本 @1.4.1,在@0.1.8中如果使用无附件传输的multer，只需要使用app.use(multer());
无需做其他的操作，但是，在新版本中，就不行，你需要使用app.use(multer().none());否则，就会报错
express+multer抛出错误：'app.use() requires middleware functions'
解决办法:app.use(multer().none());
参考博客记录:https://segmentfault.com/q/1010000003050818
参考学习博客:
https://github.com/expressjs/multer
https://blog.csdn.net/chaoyangsun/article/details/79209522
https://www.cnblogs.com/lijinwen/p/7906828.html
https://segmentfault.com/a/1190000007412310
https://www.cnblogs.com/zaifeng0108/p/7225058.html
https://www.cnblogs.com/chyingp/p/express-multer-file-upload.html
https://blog.csdn.net/weixin_36094484/article/details/81415060
文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时，向何处发送表单中的数据，地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器
文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一：用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头，使全列成选中状态，然后粘贴，最后commit提交即可。（前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明：转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数