multer是express中用来处理文件上传的一个组件
文件接受类型:
1.upload.single('classname1'); //接受单一类的文件,只有一个
2.upload.array('classname2', num);//接受单一类的文件,有最大上传限制
3.upload.fields([{ name: 'classname3', maxCount: 1 }, { name: 'classname4', maxCount: 2 }]);//接受多类文件,各自有最大上传限制
4.upload.none();//只接受文本域,以这种方式上传别的文件格式,则会报错
5.upload.any();//可以接受任何文件
注意:客户端的post格式为:enctype="multipart/form-data"
文件储存控制:
文件接受了需要处理储存问题,主要有两种储存形式,1.储存在硬盘中,2.纯在在内存中
一.内存储存方式:
var storage = multer.memoryStorage()
var upload = multer({ storage: storage })
二.硬盘储存方式:
其中硬盘储存又两种方式:
(1)var upload = multer({ dest: "/path"});//只是控制文件的储存位置
(2)可以控制文件的储存,1.修改储存位置,2.修改储存名字(文件接受的时候治愈后一串字符)
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./uploads");
},
filename: function (req, file, cb) {
let obj = pathLib.parse(file.originalname);
//修改文件的储存名字
let newName = file.fieldname + "_" + (new Date().getTime()) + obj.ext;
cb(null, newName);
}
});
限制文件接受:
遇到再说
错误处理:
遇到再说
下面附上服务端代码和客户端代码:server.js
var multer = require('multer');
var express = require('express');
var pathLib = require('path');
var server = express();
server.listen(233);
console.log('server start');
//可以控制文件的储存,1.储存位置,2.储存名字
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "./uploads");
},
filename: function (req, file, cb) {
let obj = pathLib.parse(file.originalname);
let newName = file.fieldname + "_" + (new Date().getTime()) + obj.ext;
cb(null, newName);
}
});
//1. 使用diskStorage方式可以控制储存位置和文件名字
var upload = multer({ storage: storage});
//2. 使用dest只能控制文件储存位置
//var upload = multer({ dest: "/path"});
//单一文件的上传,如果接口onefile相同,但是文件名不同,则会报错
server.post('/onefile', upload.single('example1'), function (req, res, next) {
var file = req.file;
//single只有file,没有files(undefine)
var files = req.files;
console.log("type_onefile name : ", file.filename);
next();
});
//同一类文件上传,如果超出了限制数量会报错
server.post('/arronefile', upload.array('example2', 2), function (req, res, next) {
//如果是多个,则file为undefine
var file = req.file;
var files = req.files;
for (let i in files) {
console.log("type_arrnoefile name : ", file.filename);
}
next();
});
//多类文件上传, 如果超出了限制数量也会报错
server.post('/arrmanyfile',
upload.fields([{ name: 'example3', maxCount: 1 }, { name: 'example4', maxCount: 2 }]),
function (req, res, next) {
//文件存在对象的对应名字下
// {example3: Array(1)[Object],
// example4: Array(1)[Object]}
let files = req.files;
next();
});
//文本域上传,只接受文本域,如是其他格式文件会报错
server.post('/text-only', upload.none(), function (req, res, next) {
let file = req.file;
let files = req.files;
//textarea在req.body中获取
next();
});
//任意文件上传
server.post('/anyfile', upload.any(), function (req, res, next) {
//file为undifine files为数组
let file = req.file;
let files = req.files;
for (let i in files) {
console.log("type_anyfile name : ", file.filename);
}
next();
});
server.use('/', function (req, res) {
console.log("some one connect!");
res.end();
});
客户端代码:upload.html
<!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>
<form action="http://localhost:233/onefile" method="post" enctype="multipart/form-data">
<input type="file" name="example1"> <br>
<input type="submit" name="" value="上传"> <br>
</form>
<br>
<form action="http://localhost:233/arronefile" method="post" enctype="multipart/form-data">
<input type="file" name="example2"> <br>
<input type="file" name="example2"> <br>
<input type="file" name="example2"> <br>
<input type="submit" name="" value="上传">
</form>
<br>
<form action="http://localhost:233/arrmanyfile" method="post" enctype="multipart/form-data">
<input type="file" name="example3"> <br>
<input type="file" name="example3"> <br>
<input type="file" name="example4"> <br>
<input type="file" name="example4"> <br>
<input type="submit" name="" value="上传">
</form>
<form action="http://localhost:233/text-only" method="post" enctype="multipart/form-data">
<input type="textarea" name="textonly"> <br>
<input type="submit" name="" value="上传"> <br>
</form>
<form action="http://localhost:233/anyfile" method="post" enctype="multipart/form-data">
<input type="file" name="anyfile1"> <br>
<input type="file" name="anyfile2"> <br>
<input type="submit" name="" value="上传"> <br>
</form>
</body>
</html>