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的引數
key | description |
---|---|
dest or storage | Where to store the files |
fileFilter | Function to control which files are accepted |
limits | Limits of the uploaded data |
如果是dest,後面跟的是要上傳到伺服器的儲存路徑,例如:'uploads/';
如果是storage,就需要用下面的方法:
- var storage = multer.diskStorage({
- destination: function (req, file, cb) {
- cb(null, '/tmp/my-uploads')
- },
- filename: function (req, file, cb) {
- cb(null, file.fieldname + '-' + Date.now())
- }
- })
- 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屬性中
設定什麼種類的檔案可以上傳,什麼種類的檔案被跳過,例如
- function fileFilter (req, file, cb) {
- // The function should call `cb` with a boolean
- // to indicate if the file should be accepted
- // To reject this file pass `false`, like so:
- cb(null, false)
- // To accept the file pass `true`, like so:
- cb(null, true)
- // You can always pass an error if something goes wrong:
- 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;
//具體操作
});
});
}) ;