小編給大家分享一下Nodejs+express中間件實(shí)現(xiàn)文件上傳的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是專(zhuān)業(yè)的肇源網(wǎng)站建設(shè)公司，肇源接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行肇源網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

用nodejs做項(xiàng)目時(shí)需要用到文件上傳的功能，在網(wǎng)上搜索了很多教程，找到了一個(gè)express的中間件，用于處理multipart/form-data類(lèi)型的表單數(shù)據(jù)，可以很方便的將表單中的文件數(shù)據(jù)保存到服務(wù)器。

介紹

---

multer是一個(gè)node.js文件上傳中間件，它是在 busboy的基礎(chǔ)上開(kāi)發(fā)的，上傳的表單數(shù)據(jù)必須是multipart/form-data類(lèi)型，不然會(huì)報(bào)錯(cuò)。

簡(jiǎn)單的用法

---

定義存儲(chǔ)器

Multer作為express的一個(gè)中間件，我們可以很方便的自定義上傳的文件目錄以及保存的文件名。先看一個(gè)最簡(jiǎn)單的用法，demo1地址：

var express = require('express');
var multer = require('multer');
var app = express();

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

我們先創(chuàng)建了一個(gè)upload對(duì)象，這個(gè)對(duì)象中destination函數(shù)用來(lái)定義上傳文件的存儲(chǔ)的文件夾；filename函數(shù)用來(lái)修改上傳文件存儲(chǔ)到服務(wù)器的文件名稱(chēng)，這里我們我們加上一個(gè)時(shí)間戳簡(jiǎn)單區(qū)分一下。這兩個(gè)函數(shù)都是通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)的。每次上傳的時(shí)候這兩個(gè)函數(shù)都會(huì)調(diào)用一次，如果是多個(gè)文件上傳，那個(gè)這兩個(gè)函數(shù)就調(diào)用多次，調(diào)用順序是先調(diào)用destination，然后調(diào)用filename。

在兩個(gè)函數(shù)中都會(huì)有一個(gè)file對(duì)象，表示當(dāng)前上傳的文件對(duì)象，有以下幾個(gè)屬性：

• fieldname：上傳的字段名

• originalname：上傳的文件名

• encoding：文件的編碼類(lèi)型

• mimetype：文件的MIME類(lèi)型

附：一些常用的MIME類(lèi)型

定義路由回調(diào)

//單個(gè)文件上傳
app.post('/upload/single',upload.single('singleFile'),(req,res)=>{
    console.log(req.file);
    res.json({
        code: '0000',
        type:'single',
        originalname: req.file.originalname
    })
});

//多個(gè)文件上傳
app.post('/upload/multer',upload.array('multerFile'),(req,res)=>{
    console.log(req.files);
    let fileList = [];
    req.files.map((elem)=>{
        fileList.push({
            originalname: elem.originalname
        })
    });
    res.json({
        code: '0000',
        type:'multer',
        fileList:fileList
    });
});

在express中定義路由的回調(diào)函數(shù)時(shí)，把定義好了的upload對(duì)象作為中間件添加進(jìn)去。如果是單個(gè)文件就用single方法，如果是多個(gè)文件就用array方法，這兩個(gè)方法都需要傳一個(gè)頁(yè)面上定義好的字段名。

在路由的回調(diào)函數(shù)中，request對(duì)象已經(jīng)有了file屬性（單個(gè)文件上傳）或files屬性（多個(gè)文件上傳），files屬性是一個(gè)數(shù)組，數(shù)組的每一個(gè)對(duì)象都有以下屬性：

• fieldname：上傳的字段名

• originalname：上傳的文件名

• encoding：文件的編碼類(lèi)型

• mimetype：文件的MIME類(lèi)型

• destination：存儲(chǔ)的目錄（和destination回調(diào)函數(shù)中的目錄名一致）

• filename：保存的文件名（和filename回調(diào)函數(shù)中的文件名一致）

• path：保存的相對(duì)路徑

• size：文件的大小（單位：字節(jié)byte）

我們可以發(fā)現(xiàn)在路由的回調(diào)函數(shù)中的file對(duì)象比diskStorage中的file對(duì)象多了幾個(gè)屬性，這是因?yàn)樵赿iskStorage中文件還沒(méi)有保存，只能知道文件的大致屬性；而路由的回調(diào)函數(shù)文件已經(jīng)在服務(wù)器上保存好了，文件的保存路徑以及文件的大小都是已知的。

混合上傳

有時(shí)候我們可能需要用字段名來(lái)對(duì)上傳的文件進(jìn)行一下劃分，比如說(shuō)上傳多個(gè)圖片的時(shí)候可能有身份證還有頭像。雖然可以分開(kāi)放到兩個(gè)接口中，但是會(huì)產(chǎn)生其他一系列的麻煩事。multer支持對(duì)圖片進(jìn)行字段名的劃分。demo3地址

//多字段名上傳
let multipleFields = upload.fields([
    {name:'avatar'},
    {name:'gallery', maxCount:3},
]);
app.post('/upload/fields', (req,res)=>{
    multipleFields(req,res,(err) => {
        console.log(req.files);
        if(!!err){
            console.log(err.message);
            res.json({
                code: '2000',
                type: 'field',
                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: '0000',
            type: 'field',
            fileList: fileList,
            msg:''
        })
    });
});

在這邊也有req.files屬性，但是這個(gè)屬性并不是一個(gè)數(shù)組，而是一個(gè)復(fù)雜的對(duì)象，這個(gè)對(duì)象中有多個(gè)屬性，每個(gè)屬性名都是一個(gè)字段名，每個(gè)屬性下面又是一個(gè)數(shù)組，數(shù)組下面才是一個(gè)個(gè)的文件對(duì)象，結(jié)構(gòu)大致如下：

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

過(guò)濾文件上傳

---

在文件上傳時(shí)，有時(shí)候會(huì)上傳一些我們不需要的文件類(lèi)型，我們需要把一些不需要的文件給過(guò)濾掉。demo2地址。

文件類(lèi)型過(guò)濾

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

在定義存儲(chǔ)器的時(shí)候，新增一個(gè)fileFilter函數(shù)，用來(lái)過(guò)濾掉我們不需要的文件，在回調(diào)函數(shù)中我們傳入true/false來(lái)代表是否要保存；如果傳了false，那么destination函數(shù)和filename函數(shù)也不會(huì)調(diào)用了。

文件大小和數(shù)量過(guò)濾

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

在定義存儲(chǔ)器的時(shí)候，新增一個(gè)limits對(duì)象，用來(lái)控制上傳的一些信息，它有以下一些屬性：

• fieldNameSize：field 名字最大長(zhǎng)度，默認(rèn)值：100 bytes

• fieldSize：field 值的最大長(zhǎng)度，默認(rèn)值：1MB

• fields：非文件 field 的最大數(shù)量

• fileSize：在multipart表單中, 文件最大長(zhǎng)度 (字節(jié)單位)

• files：在multipart表單中, 文件最大數(shù)量

• parts：在multipart表單中, part傳輸?shù)淖畲髷?shù)量(fields + files)

在這邊我們把fileSize的值設(shè)置得小一點(diǎn)，設(shè)為10kb方便測(cè)試看效果，但是如果這個(gè)時(shí)候會(huì)發(fā)現(xiàn)有報(bào)錯(cuò)。因?yàn)樯蟼鞯奈募笮『苋菀拙蜁?huì)超過(guò)10KB，導(dǎo)致有報(bào)錯(cuò)出現(xiàn)，我們就需要在路由回調(diào)里對(duì)錯(cuò)誤的情況進(jìn)行捕獲。

//單個(gè)文件上傳
let singleUpload = upload.single('singleFile');
app.post('/upload/single',(req,res)=>{
    singleUpload(req,res,(err)=>{
        if(!!err){
            console.log(err.message)
            res.json({
                code: '2000',
                type:'single',
                originalname: '',
                msg: err.message
            })
            return;
        }
        if(!!req.file){
            res.json({
                code: '0000',
                type:'single',
                originalname: req.file.originalname,
                msg: ''
            })
        } else {
            res.json({
                code: '1000',
                type:'single',
                originalname: '',
                msg: ''
            })
        }
    });
});

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

以上是“Nodejs+express中間件實(shí)現(xiàn)文件上傳的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：Nodejs+express中間件實(shí)現(xiàn)文件上傳的方法
標(biāo)題網(wǎng)址：http://www.yijiale78.com/article32/pjdosc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、云服務(wù)器、靜態(tài)網(wǎng)站、網(wǎng)站制作、ChatGPT、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)