如何通過Browser.jsSDK使用OSS - Object Storage Service

本文介紹如何在Browser.js SDK中快速使用OSS服務，包括上傳檔案、下載檔案和查看檔案清單等。

前提條件

已安裝Browser.js SDK。具體操作，請參見安裝。
已配置跨域資源共用（CORS）規則。具體操作，請參見準備工作。

注意事項

目前瀏覽器中不允許執行Bucket相關的操作，僅允許執行Object相關的操作，例如PutObject、GetObject等。
由於Browser.js SDK通常在瀏覽器環境下使用，為避免暴露阿里雲帳號存取金鑰（AccessKey ID和AccessKey Secret），強烈建議您使用臨時訪問憑證的方式執行OSS相關操作。
臨時訪問憑證包括臨時存取金鑰（AccessKey ID和AccessKey Secret）和安全性權杖（SecurityToken）。擷取臨時訪問憑證的具體操作，請參見使用STS進行臨時授權。

常見操作

以下為Browser.js SDK的常見操作。

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

搭建STS Server。
為方便您搭建STS Server，OSS提供了多個語言SDK demo。
重要
以上demo僅供參考，在具體的生產環境中，請自行開發鑒權等業務所需代碼。

通過瀏覽器向搭建的STS服務發起請求，擷取STS臨時授權資訊。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
    <script type="text/javascript">
      // OSS.urllib是SDK內部封裝的發送請求的邏輯，開發人員可以使用任何發送請求的庫向your_sts_server發送請求。
      // your_sts_server需要填寫步驟1中您搭建的STS Server的IP地址或網域名稱。
      OSS.urllib.request(
        "your_sts_server",
        { method: "GET" },
        (err, response) => {
          if (err) {
            return alert(err);
          }
          try {
            result = JSON.parse(response);
          } catch (e) {
            errmsg = "parse sts response info error: " + e.message;
            return alert(errmsg);
          }
          console.log(result);
        }
      );
    </script>
  </body>
</html>

上傳檔案

使用multipartUpload介面上傳檔案。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="submit">上傳</button>
    <input id="file" type="file" />
    <!--匯入sdk檔案-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // yourRegion填寫Bucket所在地區。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
        region: "yourRegion",
        // 從STS服務擷取的臨時存取金鑰（AccessKey ID和AccessKey Secret）。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // 從STS服務擷取的安全性權杖（SecurityToken）。
        stsToken: "yourSecurityToken",
        // 填寫Bucket名稱，例如examplebucket。
        bucket: "examplebucket",
      });

      const headers = {
        // 指定該Object被下載時的網頁緩衝行為。
        "Cache-Control": "no-cache",
        // 指定該Object被下載時的名稱。
        "Content-Disposition": "example.txt",
        // 指定該Object被下載時的內容編碼格式。
        "Content-Encoding": "utf-8",
        // 指定到期時間，單位為毫秒。
        Expires: "1000",
        // 指定Object的儲存類型。
        "x-oss-storage-class": "Standard",
        // 指定Object標籤，可同時設定多個標籤。
        "x-oss-tagging": "Tag1=1&Tag2=2",
        // 指定初始化分區上傳時是否覆蓋同名Object。此處設定為true，表示禁止覆蓋同名Object。
        "x-oss-forbid-overwrite": "true",
      };

      // 指定上傳到examplebucket的Object名稱，例如exampleobject.txt。
      const name = "exampleobject.txt";
      // 擷取DOM。
      const submit = document.getElementById("submit");
      const options = {
        // 擷取分區上傳進度、斷點和傳回值。
        progress: (p, cpt, res) => {
          console.log(p);
        },
        // 設定並發上傳的分區數量。
        parallel: 4,
        // 設定分區大小。預設值為1 MB，最小值為100 KB。
        partSize: 1024 * 1024,
        // headers,
        // 自訂中繼資料，通過HeadObject介面可以擷取Object的中繼資料。
        meta: { year: 2020, people: "test" },
        mime: "text/plain",
      };

      // 監聽按鈕。
      submit.addEventListener("click", async () => {
        try {
          const data = document.getElementById("file").files[0];
          // 分區上傳。
          const res = await client.multipartUpload(name, data, {
            ...options,
            // 設定上傳回調。
            // 如果不涉及回調伺服器，請刪除callback相關設定。
            callback: {
              // 設定回調請求的伺服器位址。
              url: "http://examplebucket.aliyuncs.com:23450",
              // 設定回調請求訊息頭中Host的值，即您的伺服器配置Host的值。
              host: "yourHost",
              /* eslint no-template-curly-in-string: [0] */
              // 設定發起回調時請求body的值。
              body: "bucket=${bucket}&object=${object}&var1=${x:var1}",
              // 設定發起回調請求的Content-Type。
              contentType: "application/x-www-form-urlencoded",
              customValue: {
                // 設定發起回調請求的自訂參數。
                var1: "value1",
                var2: "value2",
              },
            },
          });
          console.log(res);
        } catch (err) {
          console.log(err);
        }
      });
    </script>
  </body>
</html>

下載檔案

採用簽名URL的方式組建檔案的下載連結，您只需要單擊連結即可下載檔案。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--匯入SDK檔案-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // yourRegion填寫Bucket所在地區。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
        region: "yourRegion",
        // 從STS服務擷取的臨時存取金鑰（AccessKey ID和AccessKey Secret）。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // 從STS服務擷取的安全性權杖（SecurityToken）。
        stsToken: "yoursecurityToken",
        // 填寫Bucket名稱。
        bucket: "examplebucket",
      });

      // 配置回應標頭實現通過URL訪問時自動下載檔案，並設定下載後的檔案名稱。
      const filename = "examplefile.txt";
      const response = {
        "content-disposition": `attachment; filename=${encodeURIComponent(
          filename
        )}`,
      };
      // 填寫Object完整路徑。Object完整路徑中不能包含Bucket名稱。
      const url = client.signatureUrl("exampleobject.txt", { response });
      console.log(url);
    </script>
  </body>
</html>

列舉檔案

以下代碼用於列舉檔案。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
  </head>
  <body>
    <script>      
      const client = new OSS({
        // yourRegion填寫Bucket所在地區。以華東1（杭州）為例，yourRegion填寫為oss-cn-hangzhou。
        region: "yourRegion",
        // 從STS服務擷取的臨時存取金鑰（AccessKey ID和AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 從STS服務擷取的安全性權杖（SecurityToken）。
        stsToken: 'yourSecurityToken',
        // 填寫Bucket名稱，例如examplebucket。
        bucket: "examplebucket",
      });

      async function list(dir) {
        try {
          // 預設最多返回1000個檔案。
          let result = await client.list();
          console.log(result);

          // 從上一次list操作讀取的最後一個檔案的下一個檔案開始繼續擷取檔案清單。
          if (result.isTruncated) {
            let result = await client.list({ marker: result.nextMarker });
          }

          // 列出首碼為'ex'的檔案。
          result = await client.list({
            prefix: "ex",
          });
          console.log(result);

          // 列出首碼為'ex'且檔案名稱字母序'example'之後的檔案。
          result = await client.list({
            prefix: "ex",
            marker: "example",
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

      list();
    </script>
  </body>
</html>