Nodejs實現(xiàn)文件上傳的示例代碼

更新時間：2017年09月26日 11:21:05 作者：謝小飛

這篇文章主要介紹了Nodejs文件上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

介紹

簡單的用法

定義存儲器

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);
    }
  })
});

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

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

fieldname：上傳的字段名
originalname：上傳的文件名
encoding：文件的編碼類型
mimetype：文件的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中定義路由的回調函數(shù)時，把定義好了的upload對象作為中間件添加進去。如果是單個文件就用 single 方法，如果是多個文件就用 array 方法，這兩個方法都需要傳一個頁面上定義好的字段名。

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

fieldname：上傳的字段名
originalname：上傳的文件名
encoding：文件的編碼類型
mimetype：文件的MIME類型
destination：存儲的目錄（和destination回調函數(shù)中的目錄名一致）
filename：保存的文件名（和filename回調函數(shù)中的文件名一致）
path：保存的相對路徑
size：文件的大小（單位：字節(jié)byte）

我們可以發(fā)現(xiàn)在路由的回調函數(shù)中的file對象比diskStorage中的file對象多了幾個屬性，這是因為在diskStorage中文件還沒有保存，只能知道文件的大致屬性；而路由的回調函數(shù)文件已經在服務器上保存好了，文件的保存路徑以及文件的大小都是已知的。

過濾文件上傳

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

文件類型過濾

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

在定義存儲器的時候，新增一個fileFilter函數(shù)，用來過濾掉我們不需要的文件，在回調函數(shù)中我們傳入true/false來代表是否要保存；如果傳了false，那么destination函數(shù)和filename函數(shù)也不會調用了。

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

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

在定義存儲器的時候，新增一個limits對象，用來控制上傳的一些信息，它有以下一些屬性：

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

在這邊我們把fileSize的值設置得小一點，設為10kb方便測試看效果，但是如果這個時候會發(fā)現(xiàn)有報錯。因為上傳的文件大小很容易就會超過10KB，導致有報錯出現(xiàn)，我們就需要在路由回調里對錯誤的情況進行捕獲。

//單個文件上傳
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代碼都在這個倉庫里

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: