node.js中 express + multer 处理文件上传

multer中间件,可以很方便的结合express处理用户表单上传的文件。

一、安装multer

npm install multer

  

二、处理单个文件上传

const express = require('express');
const multer = require('multer');
const path = require('path'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); //创建一个multer对象,dest用来设置上传文件存放的目录
let upload = multer({dest: 'uploads/'});
//single()方法是用来处理单个文件上传,注意参数的名字要与表单中的name值一致
app.post('/upload', upload.single('img'), function (req, res) {
//body里面存放了表单的文本域信息
console.log(req.body);
//file存放了单个文件的信息
console.log(req.file); res.end('ok');
});

index.html的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="http://localhost:8888/upload" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="name"><br>
密码:<input type="password" name="pwd"><br>
图片:<input type="file" name="img"><br>
<input type="submit" value="提交">
</form>
</body>
</html>

点击提交后,可以看到在upload目录下有一个文件生成了,这个文件就是我们上传的文件,不过好像扩展名没有了。

二、处理多个文件上传

处理多个文件上传,可以使用 array() 或 fields() 方法。

const express = require('express');
const multer = require('multer');
const path = require('path'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); let upload = multer({dest: 'uploads/'});
//array()方法用于处理多个文件上传
//参数一表示,文件上传表单name属性的值
//参数二表示,允许上传文件个数
app.post('/uploads', upload.array('imgs', 3), function (req, res) {
//files存放了多个文件的信息,是一个数组
console.log(req.files);
res.end('ok');
}); //fields()方法也可以处理多个文件,参数是一个对象数组。
//对象中用name指定文件上传表单name属性的值,maxCount指定允许上传文件个数
app.post('/objects', upload.fields([
{name: "head", maxCount: 1},
{name: "info", maxCount: 3}
]), function (req, res) {
//files是一个对象,键就是我们上面设置的name的值,值就是文件数组
console.log(req.files);
res.end('ok');
});

index.html的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="http://localhost:8888/uploads" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="name"><br>
密码:<input type="password" name="pwd"><br>
图片1:<input type="file" name="imgs"><br>
图片2:<input type="file" name="imgs"><br>
图片3:<input type="file" name="imgs"><br>
<input type="submit" value="提交">
</form> <form action="http://localhost:8888/objects" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="name"><br>
密码:<input type="password" name="pwd"><br>
头像:<input type="file" name="head"><br>
信息1:<input type="file" name="info"><br>
信息2:<input type="file" name="info"><br>
<input type="submit" value="提交">
</form>
</body>
</html>

  

三、自定义文件存储路径和文件名

上面的代码我们通过配置 dest 来指定存放目录。不过如果上传文件过多,单一的存放在一个目录下肯定有问题,所以需要我们自定义。

还有文件上传后,都没有扩展名了,这显然也需要我们自定义。

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); let upload = multer({
storage: multer.diskStorage({
//设置文件存储位置
destination: function (req, file, cb) {
let date = new Date();
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate();
let dir = "./uploads/" + year + month + day; //判断目录是否存在,没有则创建
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, {recursive: true});
} //dir就是上传文件存放的目录
cb(null, dir);
},
//设置文件名称
filename: function (req, file, cb) {
let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
//fileName就是上传文件的文件名
cb(null, fileName);
}
})
}); app.post('/uploads', upload.array('imgs', 3), function (req, res) {
console.log(req.files);
res.end('ok');
});

  

四、过滤上传文件

有些时候我们希望用户上传的只是图片文件,其他文件不让上传。

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); let upload = multer({
//用于过滤文件的函数
fileFilter: function (req, file, cb) {
let ext = path.extname(file.originalname);
let extArr = ['.jpg', '.jpeg', '.gif', '.png'];
if (!extArr.includes(ext)) {
//拒绝这个文件
//cb(null, false);
//当然我们还可以发送一个错误
cb(new Error('扩展名不正确'));
} //接受这个文件
cb(null, true);
}
}); app.post('/uploads', upload.array('imgs', 3), function (req, res) {
console.log(req.files);
res.end('ok');
}); //捕获错误
app.use(function (err, req, res, next) {
res.send(err.toString());
});
上一篇:【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳


下一篇:ViewController respondsToSelector 错误的解决方法