阿里雲團隊努力不懈,力求將最新的技術內容更快地以您最熟悉的語言呈現。本文由簡體中文內容自動轉碼而成,過程無人工干預。阿里雲不保證此自動轉碼的準確性、完整性及時效性。因轉碼造成的任何內容錯誤及因此可能帶來的損失,阿里雲概不負責,敬請見諒。本文内容請以簡體中文版本為準。
全部產品
Search
文件中心

快速開始-瀏覽器

更新時間: Oct 30, 2018

下面介紹如何在BrowserJS-SDK中快速使用訪問OSS服務,包括上傳/下載檔案和查看檔案清單。

注意:雲帳號AccessKey擁有所有API存取權限,建議遵循阿里雲安全最佳實務,在用戶端不要使用會泄露配置的ak,所以請建立並使用STS方式(臨時帳號許可權)給用戶端授權。

STS場景說明:臨時帳號許可權(STS)
更多有關瀏覽器的使用請參考:瀏覽器應用
樣本工程請參考:example

Bucket設定

從瀏覽器中直接存取OSS需要開通Bucket的CORS設定

  • 將allowed origins設定成 *
  • 將allowed methods設定成 PUT, GET, POST, DELETE, HEAD
  • 將allowed headers設定成 *
  • 將expose headers設定成 ETag x-oss-request-id

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

使用SDK

目前瀏覽器中不能直接進行Bucket相關的操作(例如list buckets, get/set bucket logging/referer/website/cors)。但是可以進行Object相關的操作(例如上傳/下載檔案,查看檔案清單等)。

包含SDK

首先在html檔案的<head>中包含如下標籤:

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

想瞭解其他引入方式可參考安裝介紹

通過new OSS.Wapper()來建立client,OSS.Wrapper提供了非同步介面,類似於callback的方式,在.then()中處理返回的結果,在.catch()中處理錯誤。

搭建STS Server 並從用戶端獲取臨時授權資訊

  1. 為帳號開通STS服務,如果已開通可以跳過,開通STS請參見STS開通說明

  2. 藉助STS的SDK或API應用專屬的STS簽名服務。為了方便大家快速理解,提供了多個語言的版本Demo程式供參考:

  3. 在前端(瀏覽器)中向搭建的STS服務發起請求,獲取STS臨時授權資訊。

    1. <script type="text/javascript">
    2. OSS.urllib.request("http://your_sts_server/",
    3. {method: 'GET'},
    4. function (err, response) {
    5. if (err) {
    6. return alert(err);
    7. }
    8. try {
    9. result = JSON.parse(response);
    10. } catch (e) {
    11. errmsg = 'parse sts response info error: ' + e.message;
    12. return alert(errmsg);
    13. }
    14. // console.log(result)
    15. })
    16. </script>

查看檔案清單

  1. <script type="text/javascript">
  2. OSS.urllib.request("http://your_sts_server/",
  3. {method: 'GET'},
  4. function (err, response) {
  5. if (err) {
  6. return alert(err);
  7. }
  8. try {
  9. result = JSON.parse(response);
  10. } catch (e) {
  11. return alert('parse sts response info error: ' + e.message);
  12. }
  13. var client = new OSS.Wrapper({
  14. accessKeyId: result.AccessKeyId,
  15. accessKeySecret: result.AccessKeySecret,
  16. stsToken: result.SecurityToken,
  17. endpoint: '<oss endpoint>',
  18. bucket: '<Your bucket name>'
  19. });
  20. client.list({
  21. 'max-keys': 10
  22. }).then(function (result) {
  23. console.log(result);
  24. }).catch(function (err) {
  25. console.log(err);
  26. });
  27. });
  28. </script>

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

在瀏覽器中開啟html檔案,然後開啟Chrome的開發人員控制台,就可以看到list文件的結果了。

list

注意:瀏覽器是不受信任的環境,如果把AccessKeyId和AccessKeySecret直接保存在瀏覽器端,存在極高的風險。建議只在測試時使用明文設定,業務應用中請使用 STS鑒權模式自簽名模式 ,詳細說明請參考存取控制移動端直傳

上傳檔案

下面使用multipartUpload介面來上傳檔案:

  1. <body>
  2. <input type="file" id="file" />
  3. <script type="text/javascript">
  4. document.getElementById('file').addEventListener('change', function (e) {
  5. var file = e.target.files[0];
  6. var storeAs = 'upload-file';
  7. console.log(file.name + ' => ' + storeAs);
  8. OSS.urllib.request("http://your_sts_server/",
  9. {method: 'GET'},
  10. function (err, response) {
  11. if (err) {
  12. return alert(err);
  13. }
  14. try {
  15. result = JSON.parse(response);
  16. } catch (e) {
  17. return alert('parse sts response info error: ' + e.message);
  18. }
  19. var client = new OSS.Wrapper({
  20. accessKeyId: result.AccessKeyId,
  21. accessKeySecret: result.AccessKeySecret,
  22. stsToken: result.SecurityToken,
  23. endpoint: '<oss endpoint>',
  24. bucket: '<Your bucket name>'
  25. });
  26. client.multipartUpload(storeAs, file).then(function (result) {
  27. console.log(result);
  28. }).catch(function (err) {
  29. console.log(err);
  30. });
  31. });
  32. });
  33. </script>
  34. </body>

upload

下載檔案

在瀏覽器中不能直接操作檔案,因此採用簽名URL的方式來組建檔案的下載連結,使用者只需要單擊連結就可以下載檔案。

  1. <body>
  2. <input type="button" id="download" value="Download" />
  3. <script type="text/javascript">
  4. document.getElementById('download').addEventListener('click', function (e) {
  5. var objectKey = 'test/download_file';
  6. var saveAs = 'download_file';
  7. console.log(objectKey + ' => ' + saveAs);
  8. OSS.urllib.request("http://your_sts_server/",
  9. {method: 'GET'},
  10. function (err, response) {
  11. if (err) {
  12. return alert(err);
  13. }
  14. try {
  15. result = JSON.parse(response);
  16. } catch (e) {
  17. return alert('parse sts response info error: ' + e.message);
  18. }
  19. var client = new OSS.Wrapper({
  20. accessKeyId: result.AccessKeyId,
  21. accessKeySecret: result.AccessKeySecret,
  22. stsToken: result.SecurityToken,
  23. endpoint: '<oss endpoint>',
  24. bucket: '<Your bucket name>'
  25. });
  26. var result = client.signatureUrl(objectKey, {
  27. expires: 3600,
  28. response: {
  29. 'content-disposition': 'attachment; filename="' + saveAs + '"'
  30. }
  31. });
  32. console.log(result);
  33. window.location = result;
  34. });
  35. });
  36. </script>
  37. </body>

download_with_sts