閱讀332 返回首頁    go 小米MIX

瀏覽器應用__JavaScript-SDK_SDK 參考_對象存儲 OSS-阿裏雲

瀏覽器支持

  • IE(>=10)和Edge
  • 主流版本的Chrome/Firefox/Safari
  • 主流版本的Android/iOS/WindowsPhone

注意：

  • 在IE中使用需要在引入sdk之前引入promise庫：

    1.   <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    2.   <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

設置

Bucket設置

從瀏覽器中直接訪問OSS需要開通Bucket的CORS 設置：

  • 將allowed origins設置成’*’
  • 將allowed methods設置成’PUT, GET, POST, DELETE, HEAD’
  • 將allowed headers設置成’*’
  • 將expose headers設置成’ETag’

注意：請將該條CORS規則設置成所有CORS規則的第一條。

STS設置

為了不在網頁中暴露AccessKeyId和AccessKeySecret，我們采用STS進行臨時授權。授權服務器由用戶維護，隻有認證的用戶才能向授權服務器申請臨時權限。參考OSS使用STS設置子賬號和STS的Policy，參考Node.js STS AppServer搭建自己的授權服務器。

例子

下麵我們將使用SDK開發一個網頁應用，包含4個功能：

  • 上傳文件
  • 上傳文本
  • 列出文件
  • 下載文件

完整的代碼可以在oss-in-browser找到。最終的效果如下：

下麵的介紹將以“上傳文件”為例：

1. 創建網頁

對於“上傳文件”的功能，在網頁上需要4個控件：

  • 一個文件選擇框，用於選擇需要上傳的文件
  • 一個文本框，用於輸入上傳到OSS的Object名字
  • 一個按鈕，用於開始上傳
  • 一個進度條，用於顯示上傳的進度

下麵的代碼創建了這4個控件，其中是為了使用Bootstrap樣式，可以先忽略。

  1. <div class="form-group">
  2.   <label>Select file</label>
  3.   <input type="file" id="file" />
  4. </div>
  5. <div class="form-group">
  6.   <label>Store as</label>
  7.   <input type="text" class="form-control" id="object-key-file" value="object" />
  8. </div>
  9. <div class="form-group">
  10.   <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
  11. </div>
  12. <div class="form-group">
  13.   <div class="progress">
  14.     <div id="progress-bar"
  15.          class="progress-bar"
  16.          role="progressbar"
  17.          aria-valuenow="0"
  18.          aria-valuemin="0"
  19.          aria-valuemax="100" style="min-width: 2em;">
  20.       0%
  21.     </div>
  22.   </div>
  23. </div>

2. 添加樣式

接下來為網頁添加一些樣式，讓它更好看一些，這裏我們用到了Bootstrap。在網頁的<head>標簽中加入樣式：

  1. <head>
  2.   <title>OSS in Browser</title>
  3.   <link rel="stylesheet" href="bootstrap.min.css" />
  4. </head>

其中bootstrap.min.css可以在bootstrap的官網下載。

3. 添加腳本

到目前為止，網頁是靜態的，點擊上麵的按鈕也不會有反應。接下來的重點是為它添加一些JavaScript腳本，讓它能夠上傳文件/下載文件/列出文件。

首先在<head>標簽中引入SDK的開發包：

  1. <head>
  2.   <title>OSS in Browser</title>
  3.   <link rel="stylesheet" href="bootstrap.min.css" />
  4.   <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
  5.   <script type="text/javascript" src="app.js"></script>
  6. </head>

其中app.js是真正執行上傳文件的代碼，內容如下：

  1. var appServer = 'https://localhost:3000';
  2. var bucket = 'js-sdk-bucket-sts';
  3. var region = 'oss-cn-hangzhou';
  5. var urllib = OSS.urllib;
  6. var OSS = OSS.Wrapper;
  7. var STS = OSS.STS;
  9. var applyTokenDo = function (func) {
  10.   var url = appServer;
  11.   return urllib.request(url, {
  12.     method: 'GET'
  13.   }).then(function (result) {
  14.     var creds = JSON.parse(result.data);
  15.     var client = new OSS({
  16.       region: region,
  17.       accessKeyId: creds.AccessKeyId,
  18.       accessKeySecret: creds.AccessKeySecret,
  19.       stsToken: creds.SecurityToken,
  20.       bucket: bucket
  21.     });
  23.     return func(client);
  24.   });
  25. };
  27. var progress = function (p) {
  28.   return function (done) {
  29.     var bar = document.getElementById('progress-bar');
  30.     bar.style.width = Math.floor(p * 100) + '%';
  31.     bar.innerHTML = Math.floor(p * 100) + '%';
  32.     done();
  33.   }
  34. };
  36. var uploadFile = function (client) {
  37.   var file = document.getElementById('file').files[0];
  38.   var key = document.getElementById('object-key-file').value.trim() || 'object';
  39.   console.log(file.name + ' => ' + key);
  41.   return client.multipartUpload(key, file, {
  42.     progress: progress
  43.   }).then(function (res) {
  44.     console.log('upload success: %j', res);
  45.     return listFiles(client);
  46.   });
  47. };
  49. window.onload = function () {
  50.   document.getElementById('file-button').onclick = function () {
  51.     applyTokenDo(uploadFile);
  52.   }
  53. };

上傳一個文件分為以下步驟：

  • 向授權服務器申請臨時權限。其中授權服務器是網站開發者構建的用於向終端用戶提供臨時授權的服務。開發者可以在授權時為不同的用戶提供不同的權限（參考OSS使用STS)。授權服務器可以參考這個例子，為了簡便，例子中授權服務器直接向用戶返回臨時憑證。
  • 使用臨時密鑰創建OSS Client
  • 通過multipartUpload上傳選中的文件，並通過progress參數設置進度條

4. 其他功能

上傳文本內容、獲取文件列表、下載文件等功能請參考代碼示例：OSS in Browser。

最後更新：2016-11-23 16:04:10

  上一篇：go 快速開始-NodeJS__JavaScript-SDK_SDK 參考_對象存儲 OSS-阿裏雲
  下一篇：go 自定義域名綁定__JavaScript-SDK_SDK 參考_對象存儲 OSS-阿裏雲