全部产品
Search
文档中心

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

更新时间:Dec 20, 2023

本文介绍如何列举指定存储空间下(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)。获取临时访问凭证的具体操作,请参见使用STS进行临时授权

列举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",
        // 从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>
          

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

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',
        // 从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            

相关文档

关于列举文件的API接口说明,请参见GetBucket (ListObjects)