node.js中间件multer

最新推荐文章于 2025-06-17 11:17:54 发布

ioszhanghui

最新推荐文章于 2025-06-17 11:17:54 发布

阅读量810

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Node 文章标签： multer multipart/form-data 文件上传

本文链接：https://blog.youkuaiyun.com/ioszhanghui/article/details/90245901

Node 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍如何使用Node.js的Multer中间件处理multipart/form-data类型的文件上传请求，包括单文件、多文件及多组文件的上传处理，以及配置存储路径和文件名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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