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());
});

posted on 2019-01-19 21:58 怀素真阅读(2319) 评论(0) 编辑收藏举报

刷新页面返回顶部