筆者用nodejs做專案時需要用到檔案上傳的功能，在網上搜尋了很多教程，找到了一個express的中介軟體，用於處理multipart/form-data型別的表單資料，可以很方便的將表單中的檔案資料儲存到伺服器。

介紹

　　multer是一個node.js檔案上傳中介軟體，它是在 busboy的基礎上開發的，上傳的表單資料必須是multipart/form-data型別，不然會報錯。　　

簡單的用法

定義儲存器

　　Multer作為express的一箇中介軟體，我們可以很方便的自定義上傳的檔案目錄以及儲存的檔名。先看一個最簡單的用法，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);
        }
    })
});複製程式碼

　　我們先建立了一個upload物件，這個物件中destination函式用來定義上傳檔案的儲存的資料夾；filename函式用來修改上傳檔案儲存到伺服器的檔名稱，這裡我們我們加上一個時間戳簡單區分一下。這兩個函式都是通過回撥函式來實現的。每次上傳的時候這兩個函式都會呼叫一次，如果是多個檔案上傳，那個這兩個函式就呼叫多次，呼叫順序是先呼叫destination，然後呼叫filename。

　　在兩個函式中都會有一個file物件，表示當前上傳的檔案物件，有以下幾個屬性：

fieldname：上傳的欄位名
originalname：上傳的檔名
encoding：檔案的編碼型別
mimetype：檔案的MIME型別

附：一些常用的MIME型別

定義路由回撥

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

//多個檔案上傳
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中定義路由的回撥函式時，把定義好了的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:'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屬性，但是這個屬性並不是一個陣列，而是一個複雜的物件，這個物件中有多個屬性，每個屬性名都是一個欄位名，每個屬性下面又是一個陣列，陣列下面才是一個個的檔案物件，結構大致如下：

{
    "avatar":[{
        fieldname: "",
        originalname: ""
        //...
    }],
    "gallery":[{
        fieldname: "",
        originalname: ""
        //...
    }]
}複製程式碼

過濾檔案上傳

　　在檔案上傳時，有時候會上傳一些我們不需要的檔案型別，我們需要把一些不需要的檔案給過濾掉。demo2地址。

檔案型別過濾

var upload = multer({
    //...其他程式碼
    fileFilter: function(req, file, cb){
        if(file.mimetype == 'image/png'){
            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('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: ''
            })
        }
    });
});

//多個檔案上傳
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:''
        });
    });
});複製程式碼

　　所有的demo程式碼都在這個倉庫裡。如果覺得寫得還不錯，請關注我的掘金主頁。更多文章請訪問我的部落格地址

Nodejs檔案上傳

介紹