Browser.js SDK を使用してバケット内のファイルをリストする方法 - Object Storage Service

このトピックでは、指定されたバケット内のすべてのファイル (オブジェクト) をリストする方法、および指定されたディレクトリ内のファイルとサブディレクトリをリストする方法について説明します。

注意事項

Webpack や Browserify などのパッケージングツールを使用する場合は、npm install ali-oss コマンドを実行して OSS SDK for Browser.js をインストールします。
ブラウザから Object Storage Service (OSS) バケットにアクセスしようとしても、バケットに CORS ルールが設定されていない場合、ブラウザはリクエストを拒否します。したがって、ブラウザからバケットにアクセスする場合は、バケットに CORS ルールを設定する必要があります。詳細については、「インストール」をご参照ください。
ほとんどの場合、OSS SDK for Browser.js はブラウザで使用されます。AccessKey ペアの漏洩を防ぐため、セキュリティトークンサービス (STS) から取得した一時的なアクセス認証情報を使用して OSS にアクセスすることを推奨します。
一時的なアクセス認証情報は、AccessKey ペアとセキュリティトークンで構成されます。AccessKey ペアは、AccessKey ID と AccessKey Secret で構成されます。一時的なアクセス認証情報を取得する方法の詳細については、「STS を使用した一時的なアクセス権限付与」をご参照ください。

バケット内の全ファイルのリスト

現在のバケット内のすべてのファイルをリストするには、list 関数を使用できます：

<!DOCTYPE html>
<html lang="ja">
  <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 をバケットが配置されているリージョンに設定します。たとえば、バケットが中国 (杭州) リージョンにある場合、yourRegion を oss-cn-hangzhou に設定します。
        region: "yourRegion",
        authorizationV4: true,
        // セキュリティトークンサービス (STS) から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret)。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // STS から取得したセキュリティトークン (SecurityToken)。
        stsToken: 'yourSecurityToken',
        // バケット名を指定します。例：examplebucket。
        bucket: "examplebucket",
      });

      async function list(dir) {
        try {
          // デフォルトでは、最大 1,000 個のファイルが返されます。
          let result = await client.list();
          console.log(result);

          // 前回のリスト操作で最後に読み取られたファイルの次のファイルから、ファイルリストの取得を続行します。
          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 にはディレクトリという概念がありません。すべての要素はオブジェクトとして格納されます。ディレクトリを作成するには、名前がスラッシュ (/) で終わる 0 KB のオブジェクトを作成します。このオブジェクトはアップロードおよびダウンロードが可能です。OSS コンソールでは、名前がスラッシュ (/) で終わるオブジェクトがディレクトリとして表示されます。Delimiter パラメーターと Prefix パラメーターを使用して、ディレクトリ機能をシミュレートできます：

Prefix にディレクトリ名を設定すると、このプレフィックスで始まるすべてのファイルをリストできます。これにより、そのディレクトリ内のすべてのファイルとサブディレクトリが再帰的にリストされます。
さらに Delimiter にスラッシュ (/) を設定すると、応答にはそのディレクトリ内のファイルとサブディレクトリのみがリストされます。サブディレクトリの名前は SubDir セクションで返されます。これらのサブディレクトリ内のファイルとディレクトリはリストされません。

あるバケットに次のファイルが含まれていると仮定します：

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="ja">
  <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 をバケットが配置されているリージョンに設定します。たとえば、バケットが中国 (杭州) リージョンにある場合、yourRegion を oss-cn-hangzhou に設定します。
        region: 'yourRegion',
        authorizationV4: true,
        // セキュリティトークンサービス (STS) から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret)。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // STS から取得したセキュリティトークン (SecurityToken)。
        stsToken: 'yourSecurityToken',
        // バケット名を指定します。例：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 SDK)

注意事項

バケット内の全ファイルのリスト

指定されたディレクトリ内のファイルとサブディレクトリのリスト

関連ドキュメント