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

介紹

簡單的用法

定義存儲(chǔ)器

Multer作為express的一個(gè)中間件，我們可以很方便的自定義上傳的文件目錄以及保存的文件名。先看一個(gè)最簡單的用法， 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ù)用來定義上傳文件的存儲(chǔ)的文件夾；filename函數(shù)用來修改上傳文件存儲(chǔ)到服務(wù)器的文件名稱，這里我們我們加上一個(gè)時(shí)間戳簡單區(qū)分一下。這兩個(gè)函數(shù)都是通過回調(diào)函數(shù)來實(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：文件的編碼類型
• mimetype：文件的MIME類型
  

定義路由回調(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è)頁面上定義好的字段名。

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

• fieldname：上傳的字段名
• originalname：上傳的文件名
• encoding：文件的編碼類型
• mimetype：文件的MIME類型
• 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中文件還沒有保存，只能知道文件的大致屬性；而路由的回調(diào)函數(shù)文件已經(jīng)在服務(wù)器上保存好了，文件的保存路徑以及文件的大小都是已知的。

過濾文件上傳

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

文件類型過濾

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ù)，用來過濾掉我們不需要的文件，在回調(diào)函數(shù)中我們傳入true/false來代表是否要保存；如果傳了false，那么destination函數(shù)和filename函數(shù)也不會(huì)調(diào)用了。

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

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

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

• fieldNameSize：field 名字最大長度，默認(rèn)值：100 bytes
• fieldSize：field 值的最大長度，默認(rèn)值：1MB
• fields：非文件 field 的最大數(shù)量
• fileSize：在multipart表單中, 文件最大長度 (字節(jié)單位)
• files：在multipart表單中, 文件最大數(shù)量
• parts：在multipart表單中, part傳輸?shù)淖畲髷?shù)量(fields + files)

在這邊我們把fileSize的值設(shè)置得小一點(diǎn)，設(shè)為10kb方便測試看效果，但是如果這個(gè)時(shí)候會(huì)發(fā)現(xiàn)有報(bào)錯(cuò)。因?yàn)樯蟼鞯奈募笮『苋菀拙蜁?huì)超過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:''
    });
  });
});

所有的demo代碼都在這個(gè) 倉庫里

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論