快捷導(dǎo)航

基于nodejs+express(4.x+)實現(xiàn)文件上傳功能

更新時間：2015年11月23日 11:39:17 作者：白色的海

通過一段時間的查閱資料發(fā)現(xiàn)實現(xiàn)上傳的方式有：1.express中間件multer模塊2.connect-multiparty模塊（但現(xiàn)在官方不推薦）3.使用multiparty模塊實現(xiàn)4.使用formidable插件實現(xiàn)，本文給大家介紹nodejs+express(4.x+)實現(xiàn)文件上傳功能，需要的朋友參考下

Nodejs是一個年輕的編程框架，充滿了活力和無限激情，一直都在保持著快速更新?；贜odejs的官方Web開發(fā)庫Express也在同步發(fā)展著，每年升級一個大版本，甚至對框架底層都做了大手術(shù)。在Express4時，替換掉中件間庫connect，而改用多個更細粒度的庫來取代。帶來的好處是明顯地，這些中間件能更自由的更新和發(fā)布，不會受到Express發(fā)布周期的影響；但問題也是很的棘手，不兼容于之前的版本，升級就意味著要修改代碼。

通過一段時間的查閱資料、摸索，我發(fā)現(xiàn)實現(xiàn)上傳的方式有：1.express中間件multer模塊（此效率最高，在express3.x原生支持，到了express4.x獨立成一個模塊了），2.connect-multiparty模塊（但現(xiàn)在官方不推薦），3.使用multiparty模塊實現(xiàn)（此方法比較普遍），4.使用formidable插件實現(xiàn)（插件呢，就是簡單易懂）;

最簡單的做法是通過“connect-multiparty”中間件實現(xiàn)上傳。

通過在項目中npm install connect-multiparty進行安裝。

用法：

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”，因為錯誤處理比較麻煩。

下面就用“multiparty”實現(xiàn)一個版本。

1.使用express（版本是4.11.x）創(chuàng)建一個項目，采用默認的jade作為模版引擎。

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

3.修改views/index.jade，如下做一個簡單的用于文件上傳的form。

 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，實現(xiàn)上傳頁面和上傳響應(yīng)的后臺代碼。

 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對象，并配置上傳目標(biāo)路徑
  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;

完成?；趎odejs+express(4.x+)實現(xiàn)文件上傳功能就全部介紹完了，希望對大家學(xué)習(xí)nodejs express相關(guān)知識有所幫助。

您可能感興趣的文章: