node應用通過multer模塊實現文件上傳


multer用於處理文件上傳的nodejs中間件,主要跟express框架搭配使用,只支持表單MIME編碼為multipart/form-data類型的數據請求.

如果要處理其他編碼的表單數據可以通過busboy或者formidable。

 multer模塊的安裝: npm install multer

構造multer對象: multer(opt)

 opt是個key-value對象,包含屬性dest/storage,fileFilter,limits.分表表示文件的存儲位置/方式,文件過濾,文件大小限制.

例如:

 

//通過設置dest屬性,表示上傳文件的存儲位置
let objmulter = multer({ dest: path.join(__dirname,'uploads')});

 

如果想對上傳文件做更多的選項設置,比如文件名,存儲類型等可以通過指定storagelet storage = multer.diskStorage({

//文件存儲路徑
   destination: (req , file , cb )=>{
      cb(null , path.join(__dirname , 'uploads')); }, //修改上傳文件的名字 //file 是個文件對象 ,fieldname對應在客戶端的name屬性
//存儲的文件需要自己加上文件的后綴,multer並不會自動添加
//這里直接忽略文件的后綴.
filename: (req , file , cb ) => { cb( null, file.fieldname +'-' + Date.now()); } }); let objMulter = multer({storage : storage });

如果初始化multer時候沒有指定dest或者storage,上傳的文件將保存在內存中,永遠不會寫入到磁盤中,在storage中如果沒有指定destination值,那么上傳的文件將存儲在系統默認的臨時文件夾.

multer關聯的文件信息:
filedname : 在form表單中指定的name屬性值 orginalname : 原始文件名 encoding : 文件編碼方式 mimetype : 多媒體類型 size : 文件大小,單位b destination : 文件上傳后存儲在服務端的路徑 filename : 文件在服務端的命名 path : 文件在服務端的完整路徑 buffer : 文件二進制數據 ps:其中destination,filename和path只有在指定storage屬性時候有效.而buffer只有文件在內存中存儲時候有效.

multer同時提供了single/array/fields/any方法用於對接受文件數的控制.

1) single(fieldname) 接收單個文件,通過req.file訪問該文件
2) array(fieldnaem,[maxcount]) 接收多個文件,通過req.files數組方法文件.maxcount指定接收文件最大數. 3) fields(fields) 接受指定fieldname的文件,fieldname由客戶端決定,通過req.files數組方法 4) any 接收所有文件上傳,通過req.files訪問文件

 

ps:該實例基於nodejs v5.8,js部分使用到es6, web框架基於express,web模板esj-mate,所以你需要安裝nodejs,同時通過npm install命令安裝express,ejs-mate,multer模塊.

1.app.js

"use strict"

const express = require('express');
const path = require('path');
const multer = require('multer');

let app = express();
let storage = multer.diskStorage({
   //文件存儲路徑
   destination: (req , file , cb )=>{
      cb(null , path.join(__dirname , 'uploads'));
   },
   //修改上傳文件的名字
   //file 是個文件對象 ,fieldname對應在客戶端的name屬性
   filename: (req , file , cb ) => {
      cb( null, file.fieldname +'-' + Date.now());
   }
});


let METHOD_MODE = { SINGLE:'single',ARRAY:'array' , ANY:"any"};
let isDest = false;  //不是dest就是storage

let obj = null;

let multerobj =  null;
if( isDest ){
  multerobj = multer({
    dest: path.join(__dirname,'uploads')
  });
}else {
  multerobj = multer({
    storage: storage
  });
};

//默認使用single方法,如果需要使用
//array和any和field等方法
//在index.html也需要做相應的修改
let mode = METHOD_MODE.SINGLE;
const  FIELD_NAME = "_file";
let upload_multer ;

(function(){
  switch( mode ){
    case METHOD_MODE.SINGLE: upload_multer = multerobj.single(FIELD_NAME);break;
    case METHOD_MODE.ARRAY: upload_multer = multerobj.array(FIELD_NAME);break;
    case METHOD_MODE.ANY: upload_multer = multerobj.any();break;
    default:
       upload_multer = null; break;
  }
})();

if(upload_multer == null ){
   throw new Error("exception");
}


app.use('/public',express.static(path.join(__dirname , 'public')));
app.set('views',path.join(__dirname , "views"));
app.set('view engine','html');
app.engine('html',require('ejs-mate'));

app.get('/' , (req ,res) =>{
  res.render('index',{title:'multer: File Upload Demo'});
});


let objMulter = multer({storage : storage });

app.post('/upload', (req, res ) => {
  upload_multer( req, res , function( err ){
     if( mode == METHOD_MODE.ARRAY || mode == METHOD_MODE.ANY){
       console.log( "file length: " + req.files.length );
     }else if(mode == METHOD_MODE.SINGLE){
       console.log(JSON.stringify( req.file ));
     }
     if(err) return res.json({issuccessful: 0, message: err });
     else
     return res.json({issuccessful: 1, message: "File is uploaded "});
  });
});

app.listen(3000,()=>{console.log("server is running...")});

2.index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title><%=title %> </title>
</head>
<body>
  <div>
    <form enctype="multipart/form-data" method="post" action="/upload">
      File:<input type="file" id="_file" name="_file" style="width:400px;height:35px;"/>
      <!-- 僅僅在使用multer。array時候 -->
      <!-- <input type="file" id="_file1" name="_file" style="width:400px;height:35px;"/>
      <input type="file" id="_file2" name="_file" style="width:400px;height:35px;"/> -->
      <input type="submit" value="submit" style="width:100px;height:35px;" />
    </form>
  </div>
</body>
</html>
View Code

 

啟動程序,打開cmd然后cd到工程目錄,node app.js 


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM