JavaScript客戶端簽名直傳 - Object Storage Service

Demo

本樣本採用Plupload 直接提交表單數據（即PostObject）到OSS，可以運行在PC瀏覽器、手機瀏覽器、微信等。您可以同時選擇多個檔案上傳，並設定上傳到指定目錄和設定上傳檔案名字是隨機檔案名還是本地檔案名。您還可以通過進度條查看上傳進度。

	说明
	檔案上傳到一個測試的公共Bucket，會定時清理，所以不要傳一些敏感及重要數據。

步驟 1：下載並安裝Plugload

Plupload是一款簡單易用且功能強大的檔案上傳工具，支援多種上傳方式，包括html5、flash、silverlight,、html4。它會智能檢測當前環境，選擇最適合的上傳方式，並且會優先採用Html5方式。請參見Plupload官網進行下載和安裝。

步驟 2：下載應用伺服器代碼

下載地址

步驟 3：修改設定檔

將下載包解壓後，修改upload.js檔案：

accessid= '<yourAccessKeyId>';
accesskey= <yourAccessKeySecrety';
host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com';

$id：您的AccessKeyId
$key：您的AessKeySecret
$host：格式為BucketName.Endpoint，例如post-test.oss-cn-hangzhou.aliyuncs.com

说明

關於Endpoint的介紹，請參見Endpoint（訪問網域名稱）。

步驟 4：設定CORS

HTML表單直接上傳到OSS會產生跨域請求。為了瀏覽安全，需要為Bucket設定跨域規則（CORS），支援Post方法。

具體操作步驟請參見設定跨域訪問。設定如下圖所示：

	说明
	在低版本IE瀏覽器，Plupload會以flash方式執行。您需要設定crossdomain.xml ，設定方法請參見OSS Web直傳—使用Flash上傳。

步驟 5：體驗JavaScript客戶端簽名直傳

將應用伺服器代碼zip包解壓到Web根目錄下。
在Web瀏覽器中輸入<Web應用伺服器位址>/oss-h5-upload-js-direct/index.html，例如http://abc.com:8080/oss-h5-upload-js-direct/index.html。
選擇一個或多個檔案進行上傳。
上傳成功後，通過控制台查看上傳結果。

核心代碼解析

因為OSS支援POST協議，所以只要在Plupload發送POST請求時帶上OSS簽名即可。核心代碼如下：

var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4',
    browse_button : 'selectfiles',
    //runtimes : 'flash',
    container: document.getElementById('container'),
    flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
    silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
    url : host,
    multipart_params: {
        'Filename': '${filename}',
        'key' : '${filename}',
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status' : '200', //讓服務端返回200，不設定則預設返回204
        'signature': signature,
    },
　....
}

上述代碼中，’Filename’: ‘${filename}’表示上傳後保持原來的檔案名。如果您想上傳到特定目錄如abc下，且檔案名不變，請修改代碼如下：

multipart_params: {
        'Filename': 'abc/' + '${filename}',
        'key' : '${filename}',
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status' : '200', //讓服務端返回200，不設定則預設返回204
        'signature': signature,
    },

設定成隨機檔案名
如果想在上傳時固定設定成隨機檔案名，尾碼保持跟客戶端檔案一致，可以將函數改為：
```
function check_object_radio() {
    g_object_name_type = 'random_name';
}
```
設定成用戶的檔案名
如果想在上傳時固定設定成用戶的檔案名，可以將函數改為：
```
function check_object_radio() {
    g_object_name_type = 'local_name';
}
```
設定上傳目錄
您可以將檔案上傳到指定目錄下。下面的代碼是將上傳目錄改成abc/，注意目錄必須以正斜線（/）結尾。
```
function get_dirname()
{
    g_dirname = "abc/"; 
}
```

上傳簽名

上傳簽名主要是對policyText進行簽名，最簡單的例子如下：

var policyText = {
    "expiration": "2020-01-01T12:00:00.000Z", // 設定Policy的失效時間，如果超過失效時間，就無法通過此Policy上傳檔案
    "conditions": [
    ["content-length-range", 0, 1048576000] // 設定上傳檔案的大小限制，如果超過限制，檔案上傳到OSS會報錯
    ]
}

總結

在客戶端通過JavaScript程式碼完成簽名，無需過多配置，即可實現直傳，非常方便。但是客戶端通過JavaScript把AccesssKeyID 和AccessKeySecret寫在代碼裡面有泄露的風險，建議採用服務端簽名後直傳。

	说明
	關於Endpoint的介紹，請參見Endpoint（訪問網域名稱）。