javascript 阿里云,如何返回某个目录的文件

一、效果图

二、实际代码

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>
相关推荐
Allen_LVyingbo8 分钟前
病历生成与质控编码的工程化范式研究:从模型驱动到系统治理的范式转变
前端·javascript·算法·前端框架·知识图谱·健康医疗·easyui
刘一说17 分钟前
腾讯位置服务JavaScript API GL与JavaScript API (V2)全面对比总结
开发语言·javascript·信息可视化·webgis
Aotman_1 小时前
JS 按照数组顺序对对象进行排序
开发语言·前端·javascript·vue.js·ui·ecmascript
Hi_kenyon9 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
EndingCoder10 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript
翼龙云_cloud10 小时前
阿里云渠道商:如何手动一键扩缩容ECS实例?
运维·服务器·阿里云·云计算
JosieBook11 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
华仔啊13 小时前
JavaScript 如何准确判断数据类型?5 种方法深度对比
前端·javascript
程序员小寒13 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
爱健身的小刘同学14 小时前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js