安装和使用OSS Browser.js SDK

如果您需要管理OSS存储空间、上传下载文件、管理数据、进行图片处理等，可以先安装OSS Browser.js SDK。本文为您介绍如何安装和使用OSS Browser.js SDK。<!-- 引入在线资源 --> <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script> <!-- 引入本地资源 --> <script src="https://intl.aliyun.com/help/zh/doc-detail/./aliyun-oss-sdk-6.18.1.min.js"></script>在代码中使用OSS对象：<script type="text/Browser.jsscript"> const client = new OSS({ // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。 region: 'yourRegion', // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。 accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // 从STS服务获取的安全令牌（SecurityToken）。 stsToken: 'yourSecurityToken', refreshSTSToken: async () => { // 向您搭建的STS服务获取临时访问凭证。 const info = await fetch('your_sts_server'); return { accessKeyId: info.accessKeyId, accessKeySecret: info.accessKeySecret, stsToken: info.stsToken } }, // 刷新临时访问凭证的时间间隔，单位为毫秒。 refreshSTSTokenInterval: 300000, // 填写Bucket名称。 bucket: 'examplebucket' }); </script> 使用npm安装SDK开发包npm install ali-oss成功完成后，即可使用import或require进行引用。由于浏览器中原生不支持require模式，因此需要在开发环境中配合相关的打包工具，例如webpack、browserify等。const OSS = require('ali-oss'); const client = new OSS({ // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。 region: 'yourRegion', // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。 accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // 从STS服务获取的安全令牌（SecurityToken）。 stsToken: 'yourSecurityToken', refreshSTSToken: async () => { // 向您搭建的STS服务获取临时访问凭证。 const info = await fetch('your_sts_server'); return { accessKeyId: info.accessKeyId, accessKeySecret: info.accessKeySecret, stsToken: info.stsToken } }, // 刷新临时访问凭证的时间间隔，单位为毫秒。 refreshSTSTokenInterval: 300000, // 填写Bucket名称。 bucket: 'examplebucket' });使用方式OSS Browser.js SDK支持同步和异步的使用方式。同步和异步方式均使用new OSS()创建client。同步方式基于ES7规范的async/await，使得异步方式同步化。以下以同步方式上传文件为例。// 实例化OSS Client。 const client = new OSS(...); async function put () { try { // object表示上传到OSS的文件名称。 // file表示浏览器中需要上传的文件，支持HTML5 file和Blob类型。 const r1 = await client.put('object', file); console.log('put success: %j', r1); const r2 = await client.get('object'); console.log('get success: %j', r2); } catch (e) { console.error('error: %j', e); } } put(); 异步方式与Callback方式类似，API接口返回Promise，使用then()处理返回结果，使用catch()处理错误。以下以异步方式下载文件为例。// 实例化OSS Client。 const client = new OSS(...); // object表示上传到OSS的文件名称。 // file表示浏览器中需要上传的文件，支持HTML5 file和Blob类型。 client.put('object', file).then(function (r1) { console.log('put success: %j', r1); return client.get('object'); }).then(function (r2) { console.log('get success: %j', r2); }).catch(function (err) { console.error('error: %j', err); });