node.js中间件multer_nodejs multer-程序员宅基地

技术标签: 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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ioszhanghui/article/details/90245901

智能推荐

攻防世界_难度8_happy_puzzle_攻防世界困难模式攻略图文-程序员宅基地

文章浏览阅读645次。这个肯定是末尾的IDAT了,因为IDAT必须要满了才会开始一下个IDAT,这个明显就是末尾的IDAT了。,对应下面的create_head()代码。,对应下面的create_tail()代码。不要考虑爆破,我已经试了一下,太多情况了。题目来源:UNCTF。_攻防世界困难模式攻略图文

达梦数据库的导出(备份)、导入_达梦数据库导入导出-程序员宅基地

文章浏览阅读2.9k次,点赞3次,收藏10次。偶尔会用到,记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录,执行导库操作  导出语句:./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释:   cwy_init/init_123..._达梦数据库导入导出

js引入kindeditor富文本编辑器的使用_kindeditor.js-程序员宅基地

文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件,可以删掉不需要要到的jsp,asp,asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件,在页面引入js文件:<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js

STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法-程序员宅基地

文章浏览阅读2.3k次,点赞6次,收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA,我们的数据线就会变为10101010,通过修改不同的内容,即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平,后半周期为低电平的状态。在SPI的通信模式中,CPHA配置会影响该实验,下图展示了不同采样位置的SPI时序图[1]。CPOL = 0,CPHA = 1:CLK空闲状态 = 低电平,数据在下降沿采样,并在上升沿移出CPOL = 0,CPHA = 0:CLK空闲状态 = 低电平,数据在上升沿采样,并在下降沿移出。_stm32g431cbu6

计算机网络-数据链路层_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输-程序员宅基地

文章浏览阅读1.2k次,点赞2次,收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决?5.如果在数据链路层不进行帧定界,会发生什么问题?6.PPP协议的主要特点是什么?为什么PPP不使用帧的编号?PPP适用于什么情况?为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输

软件测试工程师移民加拿大_无证移民,未受过软件工程师的教育(第1部分)-程序员宅基地

文章浏览阅读587次。软件测试工程师移民加拿大 无证移民,未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...

随便推点

Thinkpad X250 secure boot failed 启动失败问题解决_安装完系统提示secureboot failure-程序员宅基地

文章浏览阅读304次。Thinkpad X250笔记本电脑,装的是FreeBSD,进入BIOS修改虚拟化配置(其后可能是误设置了安全开机),保存退出后系统无法启动,显示:secure boot failed ,把自己惊出一身冷汗,因为这台笔记本刚好还没开始做备份.....根据错误提示,到bios里面去找相关配置,在Security里面找到了Secure Boot选项,发现果然被设置为Enabled,将其修改为Disabled ,再开机,终于正常启动了。_安装完系统提示secureboot failure

C++如何做字符串分割(5种方法)_c++ 字符串分割-程序员宅基地

文章浏览阅读10w+次,点赞93次,收藏352次。1、用strtok函数进行字符串分割原型: char *strtok(char *str, const char *delim);功能:分解字符串为一组字符串。参数说明:str为要分解的字符串,delim为分隔符字符串。返回值:从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它:strtok函数线程不安全,可以使用strtok_r替代。示例://借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割

2013第四届蓝桥杯 C/C++本科A组 真题答案解析_2013年第四届c a组蓝桥杯省赛真题解答-程序员宅基地

文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答

基于供需算法优化的核极限学习机(KELM)分类算法-程序员宅基地

文章浏览阅读851次,点赞17次,收藏22次。摘要:本文利用供需算法对核极限学习机(KELM)进行优化,并用于分类。

metasploitable2渗透测试_metasploitable2怎么进入-程序员宅基地

文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功,进入系统4、测试如下:二、MySQL弱密码登录:1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功,进入MySQL系统3、测试效果:三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入

Python学习之路:从入门到精通的指南_python人工智能开发从入门到精通pdf-程序员宅基地

文章浏览阅读257次。本文将为初学者提供Python学习的详细指南,从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文,您将能够掌握Python编程的核心概念,为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf

推荐文章

热门文章

相关标签