nodejs+express(4.x+)實現檔案上傳功能

基於Nodejs的官方Web開發庫Express也在同步發展著，每年升級一個大版本，甚至對框架底層都做了大手術。在Express4時，替換掉中件間庫connect，而改用多個更細粒度的庫來取代。帶來的好處是明顯地，這些中介軟體能更自由的更新和釋出，不會受到Express釋出週期的影響；但問題也是很的棘手，不相容於之前的版本，升級就意味著要修改程式碼。

實現上傳的方式有:

1.express中介軟體multer模組（此效率最高，在express3.x原生支援，到了express4.x獨立成一個模組了）。

2.connect-multiparty模組（但現在 官方不推薦 ）。

3.使用multiparty模組實現（此方法比較普遍）。

4.使用formidable外掛實現（外掛呢，就是簡單易懂）。

通過“connect-multiparty”中介軟體實現上傳：

通過在專案中npm install connect-multiparty進行安裝。

使用方法:

[JavaScript] 純文字檢視 複製程式碼
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
app.post('/upload', multipartMiddleware, function(req, resp) {
 console.log(req.body, req.files);
 // don't forget to delete all req.files when done 
});

上傳後，上傳的檔案會在臨時目錄中生成一個臨時檔案，具體可將req.files列印出檢視具體檔案路徑。

只要在註釋的地方將臨時檔案移動並重新命名到實際目錄中即可完成上傳功能。

官方地址：https://www.npmjs.com/package/connect-multiparty。

下面就用“multiparty”實現一個版本：

1.使用express（版本是4.11.x）建立一個專案，採用預設的jade作為模版引擎。

2.在專案目錄中，通過npm install multiparty進行安裝必要元件。

3.修改views/index.jade，如下做一個簡單的用於檔案上傳的form。

[JavaScript] 純文字檢視 複製程式碼
extends layout
 block content    
   form(method='post', action='/file/uploading', enctype='multipart/form-data')
   input(name='inputFile', type='file', multiple='mutiple')
   input(name='btnUp', type='submit',value='上傳')

4.修改routes/index.js，實現上傳頁面和上傳響應的後臺程式碼。

[JavaScript] 純文字檢視 複製程式碼
var express = require('express');                                                                                                                      
 var router = express.Router();
 var multiparty = require('multiparty');
 var util = require('util');
 var fs = require('fs');
 /* 上傳頁面 */
 router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
/* 上傳*/
router.post('/file/uploading', function(req, res, next){
 //生成multiparty物件，並配置上傳目標路徑
 var form = new multiparty.Form({uploadDir: './public/files/'});
 //上傳完成後處理
 form.parse(req, function(err, fields, files) {
  var filesTmp = JSON.stringify(files,null,);
  if(err){
   console.log('parse error: ' + err);
  } else {
   console.log('parse files: ' + filesTmp);
   var inputFile = files.inputFile[];
   var uploadedPath = inputFile.path;
   var dstPath = './public/files/' + inputFile.originalFilename;
   //重新命名為真實檔名
   fs.rename(uploadedPath, dstPath, function(err) {
    if(err){
     console.log('rename error: ' + err);
    } else {
     console.log('rename ok');
    }
   });
  }
  res.writeHead(, {'content-type': 'text/plain;charset=utf-'});
  res.write('received upload:\n\n');
  res.end(util.inspect({fields: fields, files: filesTmp}));
 });
});
module.exports = router;