uni-app 需要一个获取阿里oss目录及文件的SDK

uni-app 需要一个获取阿里oss目录及文件的SDK 大佬们下午好，我们公司需要有这样一个场景，就类似百度网盘一样的功能，然后是依赖于阿里oss的，在阿里oss的移动端SDK是能实现的，但是浏览器端的sdk放到uniapp里面真机运行的时候会报错

TypeError: undefined is not an object (evaluating 'result.headers['x-oss-request-id']') at pages/work/cloud_index.vue:282 __ERROR
2 回复

可以做，第三方原生sdk件封装成uniapp插件，android+iOS，联系QQ：16792999

更多关于uni-app 需要一个获取阿里oss目录及文件的SDK的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，要获取阿里云OSS（对象存储服务）的目录及文件列表，可以通过阿里云提供的OSS JavaScript SDK来实现。以下是一个如何在uni-app中集成和使用阿里云OSS SDK的示例代码。

步骤一：安装阿里云OSS SDK

首先，你需要在uni-app项目中引入阿里云OSS SDK。可以通过npm或者yarn安装，但uni-app推荐使用script标签直接引入CDN的方式，因为npm包通常是为Node.js环境准备的，而uni-app主要运行在浏览器端。

在index.html中添加以下代码：

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.15.1.min.js"></script>

步骤二：配置OSS客户端

在需要使用OSS功能的页面或组件中，配置OSS客户端。假设你已经有了阿里云OSS的AccessKeyId、AccessKeySecret、Bucket名称和区域信息。

// 在页面或组件的script部分
export default {
    data() {
        return {
            client: null,
        };
    },
    mounted() {
        this.initOSSClient();
    },
    methods: {
        initOSSClient() {
            const accessKeyId = 'yourAccessKeyId';
            const accessKeySecret = 'yourAccessKeySecret';
            const bucket = 'yourBucketName';
            const region = 'yourRegion'; // e.g., 'oss-cn-hangzhou'

            this.client = new OSS({
                region,
                accessKeyId,
                accessKeySecret,
                bucket,
            });
        },
        listFiles() {
            this.client.list({
                prefix: '', // 可选，设置目录前缀
                delimiter: '/', // 用于分层显示
                maxKeys: 100, // 单次返回最大条目数量
            }).then((result) => {
                console.log('Files and directories:', result);
                // 处理结果，result包含CommonPrefixes（目录）和Contents（文件）
            }).catch((err) => {
                console.error('Error listing files:', err);
            });
        },
    },
};

步骤三：调用listFiles方法

在需要获取目录及文件列表的地方，调用listFiles方法。

// 例如，在按钮点击事件中
methods: {
    // 其他方法...
    onButtonClick() {
        this.listFiles();
    },
},

注意事项

  1. 安全性：直接在客户端代码中硬编码AccessKeyId和AccessKeySecret是不安全的。建议使用STS（临时安全凭证）来获取临时访问权限。
  2. CORS配置：确保你的OSS Bucket已经配置了CORS（跨域资源共享），允许前端应用访问。
  3. 权限管理：根据实际需要，为Bucket和Object设置合适的权限策略。

通过上述步骤，你可以在uni-app中集成并使用阿里云OSS SDK来获取目录及文件列表。

回到顶部