如何通過Browser.jsSDK列舉Bucket下的檔案 - Object Storage Service

本文介紹如何列舉指定儲存空間下（Bucket）的所有檔案（Object）以及指定目錄下的檔案和子目錄。

注意事項

當您使用webpack或browserify等打包工具時，請通過npm install ali-oss的方式安裝Browser.js SDK。
通過瀏覽器訪問OSS時涉及跨域請求，如果未設定跨域規則，瀏覽器會拒絕跨域訪問請求。如果您希望通過瀏覽器可以正常訪問OSS，需要通過OSS設定跨域規則。具體操作，請參見準備工作。
由於Browser.js SDK通常在瀏覽器環境下使用，為避免暴露阿里雲帳號存取金鑰（AccessKey ID和AccessKey Secret），強烈建議您使用臨時訪問憑證的方式執行OSS相關操作。
臨時訪問憑證包括臨時存取金鑰（AccessKey ID和AccessKey Secret）和安全性權杖（SecurityToken）。擷取臨時訪問憑證的具體操作，請參見授權訪問。

列舉Bucket下的所有檔案

通過list函數列舉當前Bucket下的所有檔案：

<!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",
        authorizationV4: true,
        // 從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) {
            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>

OSS沒有檔案夾的概念，所有元素都是以Object來儲存。建立檔案夾本質上是建立一個檔案名稱以正斜線（/）結尾，大小為0 KB的Object。這個Object可以被上傳和下載，只是控制台會對以正斜線（/）結尾的Object以檔案夾的方式展示。您可以通過Delimiter和Prefix參數類比檔案夾功能：

如果把Prefix設為某個檔案夾名，就可以列舉以此Prefix開頭的檔案，即該檔案夾下遞迴的所有的檔案和子檔案夾（目錄）。
如果再把Delimiter設定為正斜線（/）時，傳回值就只列舉該檔案夾下的檔案和子檔案夾（目錄），該檔案夾下的子檔案名稱（目錄）返回在SubDir部分，子檔案夾下遞迴的檔案和檔案夾不被顯示。

假設某個Bucket中存放了如下檔案：

foo/x
foo/y
foo/bar/a
foo/bar/b
foo/hello/C/1
foo/hello/C/2
...
foo/hello/C/9999

通過listDir函數列舉指定目錄下的檔案和子目錄：

<!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',
        authorizationV4: true,
        // 從STS服務擷取的臨時存取金鑰（AccessKey ID和AccessKey Secret）。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 從STS服務擷取的安全性權杖（SecurityToken）。
        stsToken: 'yourSecurityToken',
        // 填寫Bucket名稱，例如examplebucket。
        bucket: "examplebucket",
      });

      async function listDir(dir) {
        try {
          let result = await client.list({
            prefix: dir,
            // 設定正斜線（/）為檔案夾的分隔字元。
            delimiter: "/",
          });

          result.prefixes.forEach(function (subDir) {
            console.log("SubDir: %s", subDir);
          });
          result.objects.forEach(function (obj) {
            console.log("Object: %s", obj.name);
          });
        } catch (e) {
          console.log(e);
        }
      }

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

返回的檔案清單如下：

> listDir('foo/')
=> SubDir: foo/bar/
   SubDir: foo/hello/
   Object: foo/x
   Object: foo/y

> listDir('foo/bar/')
=> Object: foo/bar/a
   Object: foo/bar/b

> listDir('foo/hello/C/')
=> Object: foo/hello/C/1
   Object: foo/hello/C/2
   ...
   Object: foo/hello/C/9999

Object Storage Service：Browser.js列舉檔案

注意事項

列舉Bucket下的所有檔案

列舉指定目錄下的檔案和子目錄

相關文檔