如何通过Browser.js SDK列举Bucket下的文件 - 对象存储 OSS

本文介绍如何列举指定存储空间下（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

对象存储 OSS：Browser.js列举文件

注意事项

列举Bucket下的所有文件

列举指定目录下的文件和子目录

相关文档