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