使用nodejs+express(4.x+)實現文件上傳

最簡單的作法是經過「connect-multiparty」中間件實現上傳。

經過在項目中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」實現一個版本。

1.使用express（版本是4.11.x）建立一個項目，採用默認的jade做爲模版引擎。

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

3.修改views/index.jade，以下作一個簡單的用於文件上傳的form。

  1 extends layout
  2 
  3 block content                                                                                                                                                                                                                                                               
  4   form(method='post', action='/file/uploading', enctype='multipart/form-data')
  5     input(name='inputFile', type='file', multiple='mutiple')
  6     input(name='btnUp', type='submit',value='上傳')

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

  1 var express = require('express');                                                                                                                                                                                                                                           
  2 var router = express.Router();
  3 var multiparty = require('multiparty');
  4 var util = require('util');
  5 var fs = require('fs');
  6 
  7 /* 上傳頁面 */
  8 router.get('/', function(req, res, next) {
  9   res.render('index', { title: 'Express' });
 10 });
 11 
 12 /* 上傳*/
 13 router.post('/file/uploading', function(req, res, next){
 14   //生成multiparty對象，並配置上傳目標路徑
 15   var form = new multiparty.Form({uploadDir: './public/files/'});
 16   //上傳完成後處理
 17   form.parse(req, function(err, fields, files) {
 18     var filesTmp = JSON.stringify(files,null,2);
 19 
 20     if(err){
 21       console.log('parse error: ' + err);
 22     } else {
 23       console.log('parse files: ' + filesTmp);
 24       var inputFile = files.inputFile[0];
 25       var uploadedPath = inputFile.path;
 26       var dstPath = './public/files/' + inputFile.originalFilename;
 27       //重命名爲真實文件名
 28       fs.rename(uploadedPath, dstPath, function(err) {
 29         if(err){
 30           console.log('rename error: ' + err);
 31         } else {
 32           console.log('rename ok');
 33         }
 34       });
 35     }
 36 
 37     res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'});
 38     res.write('received upload:\n\n');
 39     res.end(util.inspect({fields: fields, files: filesTmp}));
 40  });
 41 });
 42 
 43 module.exports = router;

完成。

 

「multiparty」的用法詳見：

www.npmjs.com/package/multiparty

github.com/andrewrk/node-multiparty