NodeJs(Web篇)Express框架(三)中间件multer

时间:2019-02-16
本文章向大家介绍NodeJs(Web篇)Express框架(三)中间件multer，主要包括NodeJs(Web篇)Express框架(三)中间件multer使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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>

参考：https://www.npmjs.com/package/multer

随机文章
Javascript知识点必读
最近更新