閱讀746 返回首頁    go 小米MIX

快速開始-瀏覽器__JavaScript-SDK_SDK 參考_對象存儲 OSS-阿裏雲

下麵介紹如何在瀏覽器中使用OSS JavaScript SDK來訪問OSS服務，包括上傳/下載文件和查看文件列表。

注意：為了簡化，下麵的介紹直接在網頁中使用AccessKeyId和AccessKeySecret，這是不安全的做法。實際使用中應使用STS進行臨時授權訪問。

更多有關瀏覽器的使用請參考：瀏覽器應用。

Bucket設置

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

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

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

使用SDK

目前瀏覽器中不能直接進行Bucket相關的操作（例如list buckets, get/set bucket logging/referer/website/cors）。但是可以進行Object相關的操作（例如上傳/下載文件，查看文件列表等）。

包含SDK

首先在html文件的<head>中包含如下標簽：

  1. <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

通過new OSS.Wapper()來創建client，OSS.Wrapper提供了異步的接口，類似於callback的方式，在.then()中處理返回的結果，在.catch()中處理錯誤。

查看文件列表

  1. <script type="text/javascript">
  2.   var client = new OSS.Wrapper({
  3.     region: '<oss region>',
  4.     accessKeyId: '<Your accessKeyId>',
  5.     accessKeySecret: '<Your accessKeySecret>',
  6.     bucket: '<Your bucket name>'
  7.   });
  9.   client.list({
  10.     'max-keys': 10
  11.   }).then(function (result) {
  12.     console.log(result);
  13.   }).catch(function (err) {
  14.     console.log(err);
  15.   });
  16. </script>

其中region參數是指您申請OSS服務時的區域，例如’oss-cn-hangzhou’。完整的區域列表可以在OSS服務節點查看。

在瀏覽器中打開html文件，然後打開Chrome的“開發者控製台”，就可以看到list文件的結果了。

上傳文件

下麵使用multipartUpload接口來上傳文件：

  1. <body>
  2.   <input type="file" id="file" />
  3.   <script type="text/javascript">
  4.     var client = new OSS.Wrapper({
  5.       region: '<oss region>',
  6.       accessKeyId: '<Your accessKeyId>',
  7.       accessKeySecret: '<Your accessKeySecret>',
  8.       bucket: '<Your bucket name>'
  9.     });
  11.     document.getElementById('file').addEventListener('change', function (e) {
  12.       var file = e.target.files[0];
  13.       var storeAs = 'upload-file';
  14.       console.log(file.name + ' => ' + storeAs);
  16.       client.multipartUpload(storeAs, file).then(function (result) {
  17.         console.log(result);
  18.       }).catch(function (err) {
  19.         console.log(err);
  20.       });
  21.     });
  22.   </script>
  23. </body>

下載文件

在瀏覽器中不能直接操作文件，因此采用簽名URL的方式來生成文件的下載鏈接，用戶隻需要點擊鏈接就可以下載文件。

  1. <body>
  2.   <input type="button" id="download" value="Download" />
  3.   <script type="text/javascript">
  4.     var client = new OSS.Wrapper({
  5.       region: '<oss region>',
  6.       accessKeyId: '<Your accessKeyId>',
  7.       accessKeySecret: '<Your accessKeySecret>',
  8.       bucket: '<Your bucket name>'
  9.     });
  11.     document.getElementById('download').addEventListener('click', function (e) {
  12.       var objectKey = 'upload-file';
  13.       var saveAs = 'download';
  14.       console.log(objectKey + ' => ' + saveAs);
  16.       var result = client.signatureUrl(objectKey, {
  17.         expires: 3600,
  18.         response: {
  19.           'content-disposition': 'attachment; filename="' + saveAs + '"'
  20.         }
  21.       });
  22.       console.log(result);
  24.       window.location = result;
  25.     });
  26.   </script>
  27. </body>

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

  上一篇：go 異常__.NET-SDK_SDK 參考_對象存儲 OSS-阿裏雲
  下一篇：go 快速開始-NodeJS__JavaScript-SDK_SDK 參考_對象存儲 OSS-阿裏雲