一、效果图
二、实际代码
c
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿里云 OSS 文件列表</title>
</head>
<body>
<h1>阿里云 OSS 文件列表</h1>
<ul id="file-list"></ul>
<!-- 引入阿里云 OSS SDK -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"></script>
<script>
// 配置 OSS 客户端
const client = new OSS({
region: '<你的区域>', // 例如 'oss-cn-hangzhou'
accessKeyId: '<你的AccessKeyId>',
accessKeySecret: '<你的AccessKeySecret>',
bucket: '<你的存储空间名称>' // 例如 'my-bucket'
});
// 列出某个目录下的文件
async function listFilesInDirectory(directory) {
try {
const result = await client.list({
prefix: directory, // 目录路径,以 '/' 结尾
delimiter: '/', // 用来模拟目录结构
'max-keys': 1000 // 可选,指定返回的最大文件数量
});
const fileListElement = document.getElementById('file-list');
console.log("result==",result)
if (result.objects) {
result.objects.forEach(file => {
const li = document.createElement('li');
li.textContent = file.name;
fileListElement.appendChild(li);
});
} else {
const li = document.createElement('li');
li.textContent = '目录中没有文件。';
fileListElement.appendChild(li);
}
} catch (err) {
console.error('Error:', err);
alert('获取文件列表失败,请检查控制台日志。');
}
}
// 调用函数列出指定目录下的文件
listFilesInDirectory('websocket/');
</script>
</body>
</html>