快捷導(dǎo)航

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

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

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

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

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

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

通過(guò)在項(xiàng)目中npm install connect-multiparty進(jìn)行安裝。

用法：

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 
});

上傳后，上傳的文件會(huì)在臨時(shí)目錄中生成一個(gè)臨時(shí)文件，具體可將req.files打印出查看具體文件路徑。

只要在注釋的地方將臨時(shí)文件移動(dòng)并重命名到實(shí)際目錄中即可完成上傳功能。

簡(jiǎn)單。

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

但是官方不建議使用該中間件，建議直接使用“multiparty”，因?yàn)殄e(cuò)誤處理比較麻煩。

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

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

2.在項(xiàng)目目錄中，通過(guò)npm install multiparty進(jìn)行安裝必要組件。

3.修改views/index.jade，如下做一個(gè)簡(jiǎn)單的用于文件上傳的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，實(shí)現(xiàn)上傳頁(yè)面和上傳響應(yīng)的后臺(tái)代碼。

 var express = require('express');                                                                                                                      
  var router = express.Router();
  var multiparty = require('multiparty');
  var util = require('util');
  var fs = require('fs');
  /* 上傳頁(yè)面 */
  router.get('/', function(req, res, next) {
   res.render('index', { title: 'Express' });
 });
 /* 上傳*/
 router.post('/file/uploading', function(req, res, next){
  //生成multiparty對(duì)象，并配置上傳目標(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;
    //重命名為真實(shí)文件名
    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+)實(shí)現(xiàn)文件上傳功能就全部介紹完了，希望對(duì)大家學(xué)習(xí)nodejs express相關(guān)知識(shí)有所幫助。

您可能感興趣的文章: