Node開發文件上傳系統及向七牛雲存儲和亞馬遜AWS S3的文件上傳

背景起，有奏樂：

有偉人曰：學習技能的最好途徑莫過於理論與實踐相結合。

初學Node這貨時，每每讀教程必會Fall asleep。

當真要開發系統時，頓覺精神百倍，即便踩坑無數也不失斗志。

因為同團隊的小伙伴們都在辛勤工作，正是因為他們的工作，

才讓我有足夠的時間拖着我疲軟的智商來研究Node和AWS這些貨。

系統完成，雖不盡完善，但不敢怠慢，迅速記錄，免遺忘。

為后續更新和開發做一參考。

這就是人生。只要努力，便美美噠。

 

標題略長，其實這系統要做的事只三件：

1. 從本地上傳文件到我們自己的服務器，並存儲。

2. 將文件上傳到七牛雲存儲。

3. 將文件上傳到亞馬遜的AWS S3存儲。

 

幾處說明：

1. 用Node的好處是寫服務端代碼也不用糾結語法問題了：

系統的開發用Node完成。寫前后端都是JS，免去了語法的困擾。

不僅回憶起數日之前寫Scala時對語法的糾結和困惑，一身冷汗。

2. Plupload是個好東東：

Client端的File Select用Plupload完成。

有了Plupload這貨，再不糾結<input type='file'>的難看樣式的兼容問題不好把控了。

Plupload雖然對File做了封裝，但也提供了如 getNative 等的接口供我們訪問原生。

十分體貼。

3. AWS的Upload在前端完成：

真相只有一個：在Node服務端的AWS的Upload我還沒跑通……

請盡情的鄙視我吧T_T

好在路路通羅馬。我繞路從前端趕到了羅馬。

服務端請求的Block在這里：

從服務端向AWS上傳文件時，其文件的Body以流方式被分塊上傳。

測試后發現，上傳完成，也只傳了部分，導致文件無法正常訪問。

而在前端上傳時，直接用原生File對象即可實現上傳。

遂成功抵達羅馬。

關於在服務端的上傳問題，有待繼續研究。

學海無涯0_0

4. 七牛的上傳在服務端完成：

七牛的上傳也可以在前端完成，只不過七牛自己的JS-SDK包裹了Plupload。

由於我的上傳邏輯是由自己的Plupload來觸發七牛和亞馬遜（或其他第三方上傳），

因此不在前端再New一個Plupload來做七牛的上傳了。

New兩個同樣的東西實在是太二了好么。

設計的理念是，所有第三方上傳都必須在我們的服務器Trigger之后才發生。

就醬任性。

 

—————— 我是冬季里顫巍巍的分割線 ——————

 

主要邏輯和部分代碼：

 

1. 主程序和框架：

使用Express框架和Jade渲染引擎。

主程序app.js只做服務器的創建和監聽，

涉及業務邏輯的請求和處理，都寫在二級目錄（./routes）的模塊里。

app.js 的部分內容如下：

var express = require('express'); 
 4 var favicon = require('serve-favicon');
var bodyParser = require('body-parser');
var debug = require('debug')('express:server');
var http = require('http');
var port = normalizePort(process.env.PORT || '3038');
var app = express();
var server = http.createServer(app);
var index = require('./routes/index'); // 業務邏輯在這里

app.set('port', port);
server.on('error', serverOnError);
server.on('listening', serverOnListening);
server.on('connection', serverOnConnecting);
server.listen(port);

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(favicon(path.join(__dirname, 'public/lib', 'favicon.ico')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);

/* ====================================================== */

module.exports = app; 

 

2. POST請求將文件上傳並存儲在本地服務器：

需要注意的是，這里的POST請求用到了中間件：

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
var express = require('express');
var router = express.Router();
router.post( ‘/saveInLocalServer’, multipartMiddleware, function(req, res){ 。。。});

這個請求接收的是從前端的Plupload上傳的File,

神秘的中間件會在服務器生成臨時文件，但不會刪除它們。

因此在處理的最后要手動刪除臨時文件req.files。How to？

收到請求后，處理文件的部分代碼如下：

var file = req.files.file;
var tempPath = file.path,
    fileName = file.name,
    fileType = file.type,
    fileSize = file.size;
var uploadDirName = dirName.DirName; // 生成目錄的模塊，每月一生
var filenameWithMd5 = MD5( new Date().getTime() ) + '-' + fileName;
var filenameForCloud = fileRename.FileRename(fileName);
// 保存到本地服務器的文件，使用MD5重命名文件
// 上傳到雲存儲的文件，使用自定義的模塊重命名
var targetPath = path.resolve('./' + uploadDirName + '/' + filenameWithMd5);
// Save file in our local server:
fs.rename(tempPath, targetPath, function(err, data){
  if( err ){
    var result = 'error';
    res.status( result ).send();
  } else {
    var result = 'ok';
    var uploadInfos = { ... }; // AWS的config信息定義在服務端，由模塊引入並發送到前端，供JS接口調用:
    res.status( result ).send( uploadInfos );
    // Next do Qi Niu Upload ... blah blah blah
  }
});

針對上述代碼的幾處說明：

a：關於在本地服務器生成目錄：

我們的需求是，每月首次觸發上傳動作時，在服務器創建一只新目錄。

該月內的其余上傳文件，都存儲在這一目錄里。

所有的文件會按上傳時間，以自然月為目錄而分類。

按月創建目錄的邏輯，我寫了一枚小小模塊，如下：

var fs = require('fs');

var _d = new Date();
var _year = _d.getFullYear();
var _month = (_d.getMonth() + 1 < 10)?('0' + (_d.getMonth() + 1)):(_d.getMonth() + 1); // 為整齊，月份都顯示為兩位數，因此1-9月前面加0
var dir = _year + '-' + _month + '-alex_upload';

if (!fs.existsSync(dir)){
  fs.mkdirSync(dir);
}

exports.DirName = dir; // 輸出模塊名為DirName

// ============================
// 假設這個文件名為makeDirName.js，則在業務邏輯中引入並應用要這樣：
var d_name = require('../routes/makeDirName');
var someName = d_name.DirName; // 輸出的模塊名在這里被這樣引用

b：關於文件重命名：

我們的需求是，存在本地服務器的文件，使用MD5重命名。

上傳到雲存儲的文件，使用時間戳和隨機字符串共同重命名。

重命名文件的模塊是醬紫寫的：

function rename( filename ) { 
  var name = ''; 
  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var length = 6; // 隨機字符串的長度，暫用6
  for(var i = 0; i < length; i++){
    name += possible.charAt( Math.floor(Math.random() * possible.length) );
  }
  var timestamp = new Date().getTime();
  name = timestamp + '-' + name + '-' + filename;
  return name;
};

exports.FileRename = rename;

c：關於res.status( 200 ).send( data )：

每個請求的response必須Call一下res.end()，

以此來告訴服務器這個請求的header和body都已發送，

並且這個請求已經完成。

如果不告訴服務器，呆萌的服務器是永遠不會知道的。

瀏覽器會一直在請求狀態中，標題欄的小圈圈一直在轉啊轉，

表示請求一直在持續啊持續。

在Call了res.end()之后，res.finished 的值為true，否則是false。

res.send() 會Call res.end()，因此不需重復Call。

 

3：在前端請求AWS S3

在發送剛才所提到的POST請求之前，

前端先new一個plupload的Uploader，部分代碼如下：

var _myUploader = new plupload.Uploader({
  runtimes:           'html5,flash,silverlight,html4',
  file_data_name:     'file',
  container:          _SCOPE.containerId,
  browse_button:      _SCOPE.filePickerId,
  uptoken_url:        _ELE.fileUptoken.innerHTML,
  url:                _ELE.fileLocalSave.innerHTML,
  flash_swf_url:      _SCOPE.swfUrl,
  silverlight_xap_url:_SCOPE.xapUrl,
  filters: {
    max_file_size:    _SCOPE.maxFileSize,
    mime_types: [
      {title: 'Image files', extensions: 'jpg,png,gif'},
      {title: 'Zip files', extensions: 'zip'}
    ]   
  }, 
  init: {...}
});

這里的 _SCOPE 和 _ELE 定義在全局作用域，或指定頁面模塊作用域下。

目的是從服務端接收相關的配置參數，在頁面發送請求時調用。

這里遵循了一個高端大氣上檔次的寫碼原則，即：

常量參數的配置，

如Domain地址、取token之通信接口、

even 賬戶的accessKey＆accessToken blah blah blah……

都在服務端某指定模塊內統一配置。

當前端需要某參數時，由頁面渲染res.render() 傳遞到頁面元素HTML屬性里，

但是不可以將Key等賬戶密鑰渲染在頁面結構里。

也可以通過前后端通信將參數傳遞給前端頁面，

例如剛才所述的POST接口里的uploadInfos。

這樣做，在一處定義，其余皆調用。

當值有更新時，只在定義處更新其值即可。

避免多處賦值，更新時丟三落四陷入混亂。

嗯咳，所有工程師都知道的好么！我說多了……

……繼續說上傳：

使用Plupload，在其FileUploaded 的回調里，

即可執行向AWS S3發送請求了。

FileUploaded是在Plupload的文件上傳成功后才會觸發。

前端請求AWS S3的簡要方法如下：

（這里的file是從FileUploaded的方法里用getNative獲取到的原生file對象）

function doAWSUpload( rename, file, info ) { 
  var file_name = file.name,
      file_type = file.type,
      file_size = file.size;
  var bucket = new AWS.S3();
  var uniqueName = rename;
  bucket.config.update({ // 配置信息，在服務端傳來的info里
    accessKeyId: info.accessKeyId,
    secretAccessKey: info.secretAccessKey
  }); 
  bucket.config.region = info.region;
  var params = { 
    Bucket: info.bucket, // 賬戶指定的bucket名
    Key: uniqueName,
    ContentType: file_type,
    Body: file,
       ACL: 'public-read', // 設置文件訪問權限 17     ServerSideEncryption: info.ServerSideEncryption
  };  
  bucket.putObject(params, function(err, data){ // 此賬戶必須要有putObject的操作權限才能調用 20     if(err){
      var errText = ' ' + file_name + ' failed in uploading to AWS! ' + err;
      _ELE.fileConsole.innerHTML += errText;
    }else{
      var url = 'https://s3.amazonaws.com/' + info.bucket + '/' + uniqueName;26       _ELE.fileConsole.innerHTML += ' AWS upload succeeded! ' + url;
    }   
  }).on('httpUploadProgress', function(progress){
    console.log( 'AWS uploading...', Math.round(progress.loaded / progress.total * 100) );
  }); 
};

執行這個方法的前提是前端頁面調用了JS-SDK，

並且，……最重要的是並且：

對應賬戶在AWS的Console管理后台的相關配置要正確。

最討厭各種相關配置了，

配來配去一百年才成功一次……

 

4：AWS的賬戶在Console管理后台的相關配置

首先注冊一枚高大上的AWS賬戶。

如果你經常在Amazon上買買買，也可以用你的Retail賬戶。

開通AWS服務，需要驗證，其過程要填寫Payment賬戶信息。

我十分Naive的填了自己的Credit Card信息，結果直接被扣掉1刀勒。

嚇尿之后，立刻刪。

大約因為作為Retail賬戶時我曾做過快捷支付神馬的腦殘設置吧。

總之，1美元而已，這已不是重點……

有了一枚飄逸的AWS賬戶后，登錄 https://console.aws.amazon.com

選擇S3服務，進來后無視一切，先Create Bucket，

點擊這個新的Bucket，選擇Properties，

在Permissions里，再選擇 “Edit CORS Configuration”，

一個較為典型的CORS Configuration可以長這個樣子：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://localhost:3038</AllowedOrigin> //本地測試入口
        <AllowedOrigin>http://shaojing.wang</AllowedOrigin> //線上測試入口
        <AllowedMethod>PUT</AllowedMethod> //可執行的方法
        <AllowedMethod>DELETE</AllowedMethod> //可執行的方法
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

這里的CORS Configuration即對跨域請求所做限制，

只有“AllowedOrigin”里指定的端口才能向AWS發出請求，

而只有“AllowedHeader”里指定的端口才能接收請求（訪問文件）。

上傳成功后，可通過這樣的URI訪問到文件：

https://s3.amazonaws.com/myBucketName/1452581386878-hPp8Mc-test.png

附：AWS的文檔在這里：http://docs.aws.amazon.com/

關於如何在服務端進行AWS S3的上傳，下次再寫文章分享。

下面該講什么了……

 

5：在服務端實現向七牛雲存儲上傳文件

該七牛了。

請八牛、九牛和十牛再耐心等一等。

六牛你不要鬧，你已經謝世了好么。

從服務器向七牛雲發送請求之前，需要獲取授權，

請求授權之前，需要設置賬戶信息。

設置賬戶信息之前，你得先有一枚賬戶。

有了賬戶就有了AccessKey & SecretKey。

還是剛才講的，在統一配置參數的模塊里，配置好這些Key們的信息，

然后在服務端將發送請求之前，做賦值：

var qiniu = require('qiniu');
var qnConf = require('../config/qiniu_config');

/* Prepare Qiniu config, we make Qiniu upload in Node Server not in browser*/
qiniu.conf.ACCESS_KEY = qnConf.QiniuConfig.ACCESS_KEY;
qiniu.conf.SECRET_KEY = qnConf.QiniuConfig.SECRET_KEY;

賦值之后，就可以開心的去請求upToken了！

寫一只孤零零的單獨小模塊，用來生成upToken，代碼長這樣：

var qiniu = require('qiniu');

function uptoken(bucketname) { // 指定一個bucket傳名字進來
  var putPolicy = new qiniu.rs.PutPolicy(bucketname);
  return putPolicy.token();
}

exports.Uptoken = uptoken;

拿到upToken就可以華麗麗麗麗的開始上傳了。

可以在剛才本地存儲的POST請求成功后的回調里做。

代碼就像醬紫：

      // Do Qiniu upload in here:
      var targetPath = path.resolve('./' + uploadDirName + '/' + filenameWithMd5); //接剛才的POST里的處理
      var qiniu_uptoken = generateUptoken.Uptoken(qnConf.QiniuConfig.Bucket_Name);
      var extra = null; // 放額外信息，先寫null
      fs.readFile(targetPath, function(error, data){
        qiniu.io.put(qiniu_uptoken, uploadDirName + '/' + filenameForCloud, data, extra, function(err, ret){
          if(err){
            console.log('Something is wrong with Qiniu upload! ', err);
          }else{
            console.log('qiniu: ', ret);
            console.log('Qiniu URL = ', qnConf.QiniuConfig.Domain + uploadDirName + '/' + filenameForCloud); //手動拼結果URL
          }
        });
      });

至此，七牛的上傳也OK鳥！

撒花～～樂隊起～～

 

5：后記

本文所述內容，僅限於最主要最基本的邏輯，

未涉及頁面的交互和部分異常響應的處理。

僅供參考。表扔雞蛋。