Nodejs+express中间件实现文件上传-js教程-PHP中文网

Nodejs+express中间件实现文件上传

青灯夜游

发布： 2021-04-16 11:00:49

转载

1956人浏览过

本篇文章给大家详细介绍 nodejs文件上传的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

Nodejs+express中间件实现文件上传

笔者用nodejs做项目时需要用到文件上传的功能，在网上搜索了很多教程，找到了一个express的中间件，用于处理multipart/form-data类型的表单数据，可以很方便的将表单中的文件数据保存到服务器。

介绍

multer是一个node.js文件上传中间件，它是在 busboy的基础上开发的，上传的表单数据必须是multipart/form-data类型，不然会报错。【相关推荐：《nodejs 教程》】　　

简单的用法

定义存储器

Multer作为express的一个中间件，我们可以很方便的自定义上传的文件目录以及保存的文件名。先看一个最简单的用法，demo1地址：

var express = require(&#39;express&#39;);
var multer = require(&#39;multer&#39;);
var app = express();

var upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, &#39;./uploads/&#39;);
        },
        filename: function (req, file, cb) {
            //file.originalname上传文件的原始文件名
            var changedName = (new Date().getTime())+&#39;-&#39;+file.originalname;
            cb(null, changedName);
        }
    })
});

登录后复制

我们先创建了一个upload对象，这个对象中destination函数用来定义上传文件的存储的文件夹；filename函数用来修改上传文件存储到服务器的文件名称，这里我们我们加上一个时间戳简单区分一下。这两个函数都是通过回调函数来实现的。每次上传的时候这两个函数都会调用一次，如果是多个文件上传，那个这两个函数就调用多次，调用顺序是先调用destination，然后调用filename。

在两个函数中都会有一个file对象，表示当前上传的文件对象，有以下几个属性：

fieldname：上传的字段名
originalname：上传的文件名
encoding：文件的编码类型
mimetype：文件的MIME类型

附：一些常用的MIME类型

定义路由回调

//单个文件上传
app.post(&#39;/upload/single&#39;,upload.single(&#39;singleFile&#39;),(req,res)=>{
    console.log(req.file);
    res.json({
        code: &#39;0000&#39;,
        type:&#39;single&#39;,
        originalname: req.file.originalname
    })
});

//多个文件上传
app.post(&#39;/upload/multer&#39;,upload.array(&#39;multerFile&#39;),(req,res)=>{
    console.log(req.files);
    let fileList = [];
    req.files.map((elem)=>{
        fileList.push({
            originalname: elem.originalname
        })
    });
    res.json({
        code: &#39;0000&#39;,
        type:&#39;multer&#39;,
        fileList:fileList
    });
});

登录后复制

在express中定义路由的回调函数时，把定义好了的upload对象作为中间件添加进去。如果是单个文件就用single方法，如果是多个文件就用array方法，这两个方法都需要传一个页面上定义好的字段名。

在路由的回调函数中，request对象已经有了file属性（单个文件上传）或files属性（多个文件上传），files属性是一个数组，数组的每一个对象都有以下属性：

fieldname：上传的字段名
originalname：上传的文件名
encoding：文件的编码类型
mimetype：文件的MIME类型
destination：存储的目录（和destination回调函数中的目录名一致）
filename：保存的文件名（和filename回调函数中的文件名一致）
path：保存的相对路径
size：文件的大小（单位：字节byte）

　　我们可以发现在路由的回调函数中的file对象比diskStorage中的file对象多了几个属性，这是因为在diskStorage中文件还没有保存，只能知道文件的大致属性；而路由的回调函数文件已经在服务器上保存好了，文件的保存路径以及文件的大小都是已知的。

混合上传

有时候我们可能需要用字段名来对上传的文件进行一下划分，比如说上传多个图片的时候可能有身份证还有头像。虽然可以分开放到两个接口中，但是会产生其他一系列的麻烦事。multer支持对图片进行字段名的划分。demo3地址

//多字段名上传
let multipleFields = upload.fields([
    {name:&#39;avatar&#39;},
    {name:&#39;gallery&#39;, maxCount:3},
]);
app.post(&#39;/upload/fields&#39;, (req,res)=>{
    multipleFields(req,res,(err) => {
        console.log(req.files);
        if(!!err){
            console.log(err.message);
            res.json({
                code: &#39;2000&#39;,
                type: &#39;field&#39;,
                msg:err.message
            })
            return;
        }
        var fileList = [];
        for(let item in req.files){
            var fieldItem = req.files[item];
            fieldItem.map((elem) => {
                fileList.push({
                    fieldname: elem.fieldname,
                    originalname: elem.originalname
                })
            });
        }
        res.json({
            code: &#39;0000&#39;,
            type: &#39;field&#39;,
            fileList: fileList,
            msg:&#39;&#39;
        })
    });
});

登录后复制

在这边也有req.files属性，但是这个属性并不是一个数组，而是一个复杂的对象，这个对象中有多个属性，每个属性名都是一个字段名，每个属性下面又是一个数组，数组下面才是一个个的文件对象，结构大致如下：

{
    "avatar":[{
        fieldname: "",
        originalname: ""
        //...
    }],
    "gallery":[{
        fieldname: "",
        originalname: ""
        //...
    }]
}

登录后复制

过滤文件上传

在文件上传时，有时候会上传一些我们不需要的文件类型，我们需要把一些不需要的文件给过滤掉。demo2地址。

文件类型过滤

var upload = multer({
    //...其他代码
    fileFilter: function(req, file, cb){
        if(file.mimetype == &#39;image/png&#39;){
            cb(null, true)
        } else {
            cb(null, false)
        }
    }
});

登录后复制

　　在定义存储器的时候，新增一个fileFilter函数，用来过滤掉我们不需要的文件，在回调函数中我们传入true/false来代表是否要保存；如果传了false，那么destination函数和filename函数也不会调用了。

文件大小和数量过滤

var upload = multer({
    //...其他代码
    limits:{
        //限制文件大小10kb
        fileSize: 10*1000,
        //限制文件数量
        files: 5
    }
});

登录后复制

在定义存储器的时候，新增一个limits对象，用来控制上传的一些信息，它有以下一些属性：

fieldNameSize：field 名字最大长度，默认值：100 bytes
fieldSize：field 值的最大长度，默认值：1MB
fields：非文件 field 的最大数量
fileSize：在multipart表单中, 文件最大长度 (字节单位)
files：在multipart表单中, 文件最大数量
parts：在multipart表单中, part传输的最大数量(fields + files)

在这边我们把fileSize的值设置得小一点，设为10kb方便测试看效果，但是如果这个时候会发现有报错。因为上传的文件大小很容易就会超过10KB，导致有报错出现，我们就需要在路由回调里对错误的情况进行捕获。

//单个文件上传
let singleUpload = upload.single(&#39;singleFile&#39;);
app.post(&#39;/upload/single&#39;,(req,res)=>{
    singleUpload(req,res,(err)=>{
        if(!!err){
            console.log(err.message)
            res.json({
                code: &#39;2000&#39;,
                type:&#39;single&#39;,
                originalname: &#39;&#39;,
                msg: err.message
            })
            return;
        }
        if(!!req.file){
            res.json({
                code: &#39;0000&#39;,
                type:&#39;single&#39;,
                originalname: req.file.originalname,
                msg: &#39;&#39;
            })
        } else {
            res.json({
                code: &#39;1000&#39;,
                type:&#39;single&#39;,
                originalname: &#39;&#39;,
                msg: &#39;&#39;
            })
        }
    });
});

//多个文件上传
let multerUpload = upload.array(&#39;multerFile&#39;);
app.post(&#39;/upload/multer&#39;, (req,res)=>{
    multerUpload(req,res,(err)=>{
        if(!!err){
            res.json({
                code: &#39;2000&#39;,
                type:&#39;multer&#39;,
                fileList:[],
                msg: err.message
            });
        }
        let fileList = [];
        req.files.map((elem)=>{
            fileList.push({
                originalname: elem.originalname
            })
        });
        res.json({
            code: &#39;0000&#39;,
            type:&#39;multer&#39;,
            fileList:fileList,
            msg:&#39;&#39;
        });
    });
});

登录后复制

所有的demo代码都在仓库里，地址：https://github.com/acexyf/multerDemo

更多编程相关知识，请访问：编程入门！！

以上就是Nodejs+express中间件实现文件上传的详细内容，更多请关注php中文网其它相关文章！