1. 程式人生 > >nodejs之express中介軟體multer實現附件上傳

nodejs之express中介軟體multer實現附件上傳

multer是express官方推薦的檔案上傳中介軟體,multer是Nodejs中用於處理檔案上傳 multipart/form-data資料的中介軟體,用於處理任何表單提交資料(包含非multipart/form-data型別的表單); 

multer 在request物件中加入了body和file或files屬性,body屬性包含了form中的文字內容,file或files包含了form 中的附件資料;

var upload = multer({ dest: 'uploads/' })下面是multer的引數

keydescription
dest or storageWhere to store the files
fileFilterFunction to control which files are accepted
limitsLimits of the uploaded data

如果是dest,後面跟的是要上傳到伺服器的儲存路徑,例如:'uploads/'

如果是storage,就需要用下面的方法:

  1. var storage = multer.diskStorage({  
  2.   destination: function (req, file, cb) {  
  3.     cb(null'/tmp/my-uploads')  
  4.   },  
  5.   filename: function (req, file, cb) {  
  6.     cb(null, file.fieldname + '-' + Date.now())  
  7.   }  
  8. })  
  9. var upload = multer({ storage: storage })  

var upload = multer({ storage: Storage }).array("imgUploader", 3);

upload的方法:

.single(fieldname)

接收一個叫做fieldname名字的附件,該附件將被儲存到req.file屬性中

接收一個名字叫fieldname的附件陣列(陣列中有多個附件),如果附件的數量大於maxCountfiles則丟擲異常。檔案陣列將被儲存到req.files屬性中。

接收所有的附件,附件將被儲存到req.files屬性中(是一個物件陣列),配置引數如下

[  { name: 'avatar', maxCount: 1 },  { name: 'gallery', maxCount: 8 }]
var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  
 console.log(req.file);//Form中的附件
  console.log(req.body);//Form中的文字
})

.any()接收所有提交的資料,儲存到req.files屬性中

設定什麼種類的檔案可以上傳,什麼種類的檔案被跳過,例如

  1. function fileFilter (req, file, cb) {  
  2.   // The function should call `cb` with a boolean 
  3.   // to indicate if the file should be accepted 
  4.   // To reject this file pass `false`, like so: 
  5.   cb(nullfalse)  
  6.   // To accept the file pass `true`, like so: 
  7.   cb(nulltrue)  
  8.   // You can always pass an error if something goes wrong: 
  9.   cb(new Error('I don\'t have a clue!'))  

Error handling---如果需要專門從multer獲取錯誤,就需要自己寫中介軟體獲取錯誤

當上傳過程出現錯誤,multer將把錯誤資訊傳送給express,你可以做一個顯示錯誤的介面。如果你希望從multer獲取錯誤,你可以呼叫你自己寫的中介軟體


var upload = multer().single('avatar')  
   
app.post('/profile', function (req, res) {  
  upload(req, res, function (err) {  
    if (err) {  
      // An error occurred when uploading   
      return  
    }  
   
    // Everything went fine   
  })  
})  

=============例項1========

//加入express 和 multer模組
npm install express --save

npm install multer --save

*********app.js***********

var express = require('express');
var app = express();//建立express例項
var routes=require('./routes/routes.js');//吧路由引入;  ./ 代表專案的當前總目錄 /Users/wofu/Desktop/node
routes.router(app);//呼叫路由
var server = app.listen(8081, function () {
  var host = server.address().address
  var port = server.address().port
  console.log(__dirname);//這裡的目錄就是/Users/wofu/Desktop/node,其中node資料夾我是直接放在了桌面
console.log(host);//主機地址
console.log(port);//埠號
  console.log("應用例項,訪問地址為 http://%s:%s", host, port)


})

*************routes**************

var router = function(app){
  var fs = require("fs");

var bodyParser = require('body-parser');

//引入multer模組  ,是上傳附件的一箇中間件
// multer是Nodejs中用於處理檔案上傳 multipart/form-data資料的中介軟體,
// 用於處理任何表單提交資料(包含非multipart/form-data型別的表單);
// multer 在request物件中加入了body和file或files屬性,body屬性包含了form中的文字內容,
// file或files包含了form 中的附件資料;

每個檔案包含以下資訊:

fieldname:在窗體中指定的欄位名

originalname:使用者計算機上檔案的名稱

encoding:檔案的編碼型別

mimetype:檔案的MIME型別

size:檔案的大小(以位元組為單位)

destination:儲存檔案的資料夾

filename:目標檔案的名稱

path:上傳檔案的完整路徑

buffer:整個檔案的Buffer

var multer = require ('multer');//設定上傳的目錄,//這裡指定了一個臨時目錄(上傳後的檔案均儲存到該目錄下),//真正開發是一般加入path模組後使用path.join(__dirname,'temp');

var upload = multer({ dest: "/Users/wofu/Desktop/node/temp" ,//伺服器上存放的位置,設定上傳的目錄,

 limits:{ // 設定限制,每次最多上傳1個檔案,檔案大小不超過1MB
    fileSize: 1000000, 
    files:1
  }});

//顯示HTML網頁

app.get('/one', function (req, res) {

 res.sendFile("/Users/wofu/Desktop/node/views" + "/" + "one.html" );//顯示靜態網頁 

 })

//單個件上傳---HTML檔案中點選提交按鈕觸發action:singleUpload//注意上傳介面中的 <input type="file" name="avatar"/>中的name必須是下面程式碼中指定的名稱

app.post('/singleUpload', upload.single('avatar'), function (req, res, next) { 

console.log(req.file);//Form中的附件

 console.log(req.body);//Form中的文字

//上傳後的結果如下 
//{ fieldname: 'avatar',---form 表單中的name屬性 
// originalname: '圖示@2x.png',----上傳的原始圖片名 
// encoding: '7bit',---編碼方式,可以在前面設定 
// mimetype: 'image/png',---檔案型別 
// destination: '/Users/wofu/Desktop/node/temp',------伺服器儲存的路徑 
// filename: '1ab8ac748ace8c68f596278070b45f75',----上傳到伺服器後的檔名,系統自動生成,需要自己更改 
// path: '/Users/wofu/Desktop/node/temp/1ab8ac748ace8c68f596278070b45f75',----檔案在伺服器中的路徑 
// size: 3346 }--------大小 
// { aaaa: 'hhh', bbb: 'aaa' }----Form表單提交的文字框中的內容 
res.end("上傳成功");
});
//多附件上傳---HTML檔案中點選提交按鈕觸發action:mulUpload
//注意上傳介面中的 <input type="file" name="photos"/>中的name必須是下面程式碼中指定的名
app.post('/mulUpload', upload.array('photos', 12), function (req, res, next) {
   console.log(req.files); console.log(req.body);  
   
//多檔案上傳返回的結果
[ { fieldname: 'photos', 

 // originalname: '理財選中@2x.png', 

 // encoding: '7bit', 

 // mimetype: 'image/png',

 // destination: '/Users/wofu/Desktop/node/temp', 

 // filename: '45d788a5dab3d7073d76d4897b421af7', 

 // path: '/Users/wofu/Desktop/node/temp/45d788a5dab3d7073d76d4897b421af7', 

// size: 1600 }, 

// { fieldname: 'photos', 

// originalname: '圖示@2x.png', 

// encoding: '7bit', 

// mimetype: 'image/png', 

// destination: '/Users/wofu/Desktop/node/temp', 

// filename: '9b39721887abab09dd6d138b8a8d1968', 

// path: '/Users/wofu/Desktop/node/temp/9b39721887abab09dd6d138b8a8d1968', 

// size: 3346 } ] 

 // { aaaa: '', bbb: '' } 

res.end("aaaaa");

 })};

 exports.router = router;

**********one.html**********

//上傳
<html>
<head>
<title>檔案上傳表單</title>
</head>
<body>
  <h2>單個檔案上傳</h2>
  <form action="/singleUpload" method="post"  enctype="multipart/form-data">
      <input type="file" name="avatar" /><br/>
      <input type="text" name="aaaa" /><br/>
      <input type="text" name="bbb" /><br/>
      <input type="submit" value="submit"/><br/>
  </form>


  <hr/>
<h2>多檔案上傳</h2>
<form action="/mulUpload" method="post"  enctype="multipart/form-data">
    <input type="file" name="photos" /><br/>
    <input type="file" name="photos" /><br/>
    <input type="file" name="photos" /><br/>
    <input type="text" name="aaaa" /><br/>
    <input type="text" name="bbb" /><br/>
    <input type="submit" value="submit"/><br/>
</form>
</body>
</html>

===============例項2========參考:http://cnodejs.org/topic/564f32631986c7df7e92b0db

新建multerUtil.js,

 var  multer=require('multer');
 var storage = multer.diskStorage({
     //設定上傳後文件路徑,uploads資料夾會自動建立。
        destination: function (req, file, cb) {
            cb(null, './public/uploads')
       }, 
     //給上傳檔案重新命名,獲取新增字尾名
      filename: function (req, file, cb) {
          var fileFormat = (file.originalname).split(".");
          cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
      }
 });  
     //新增配置檔案到muler物件。
//如需其他設定,請參考multer的limits,使用方法如下。
   var upload = multer({
     storage: storage,
     limits:{}
   });
  
 //匯出物件
module.exports = upload;

使用

testController.js

var muilter = require('./multerUtil');
        //multer有single()中的名稱必須是表單上傳欄位的name名稱。
 var upload=muilter.single('file');       	   
      exports.dataInput = function (req, res) {
      upload(req, res, function (err) {
        //新增錯誤處理
    if (err) {
         return  console.log(err);
    } 
        //檔案資訊在req.file或者req.files中顯示。
    console.log(req);
  });
 }

app.js

var testController=require('./testController');
 app.post('/dataInpute',testController.dataInput);

其他說明

1.檔案上傳有以下方法

  • muilter.single(‘file’), //適用於單檔案上傳
  • muilter.array(‘file’,num), //適用於多檔案上傳,num為最多上傳個數,上傳檔案的數量可以小於num,
  • muilter.fields(fields), //適用於混合上傳,比如A類檔案1個,B類檔案2個。官方API有詳細說明。

2.file為上傳欄位名稱,當使用form表單submit方式上傳時,必須與表單上傳的name屬性保持一致。表單記得加上 enctype=‘multipart/form-data’

3.對上傳檔案大小限制,名稱限制等均可在limits中加上

==============multiparty模組實現附件上傳==============

var express = require('express');
var router = express.Router();
var multiparty = require('multiparty');
var path = require('path');
var fs = require("fs");
 
router.post('/add',function(req,res,next){
    // 解析一個檔案上傳
    var form = new multiparty.Form();
    //設定檔案儲存路徑
    form.uploadDir = "uploads/images/";
    //設定單檔案大小限制
    form.maxFilesSize = 2 * 1024 * 1024;
    //form.maxFields = 1000;  設定所以檔案的大小總和
    //解析表單資料
    form.parse(req, function(err, fields, files) {
        //fields:非檔案內容;files:檔案內容
        console.log(files.originalFilename);
        console.log(files.path);
        //重新命名檔名
        fs.rename(oldPath,newPath,(err) => {
            if (err) throw err;
            //具體操作
        });
    });
}) ;