断点续传【准备工作】

如果您需要管理OSS存储空间、上传下载文件、管理数据、进行图片处理等,可以先安装OSS Browser.js SDK。本文为您介绍如何安装和使用OSS Browser.js SDK。

准备工作

  • 使用RAM用户或STS方式访问

    由于阿里云账号AccessKey拥有所有API访问权限,建议遵循阿里云安全最佳实践。如果部署在服务端,可以使用RAM用户或STS来进行API访问或日常运维管控操作,如果部署在客户端,请使用STS方式来进行API访问。更多信息,请参见访问控制

  • 设置跨域资源共享(CORS)

    通过浏览器直接访问OSS时,CORS配置规则要求如下:

    • 来源 :设置精准域名(例如https://www.aliyun.com)或带有通配符星号(*)的域名(例如https://*.aliyun.com)。

    • 允许Methods :请根据实际使用场景,选择不同的Methods。例如分片上传时,设置为PUT ;删除文件时,设置为DELETE

    • 允许Headers :设置为*

    • 暴露Headers :请根据实际使用场景,设置暴露的Headers。例如设置为ETagx-oss-request-idx-oss-version-id

具体操作,参见跨域设置。

注意事项:

OSS Browser.js SDK通过BrowserifyBabel产生适用于浏览器的代码。由于浏览器环境的特殊性,无法使用以下功能:

  • 流式上传:浏览器中无法设置chunked编码,建议使用分片上传替代。

  • 操作本地文件:浏览器中不能直接操作本地文件系统,建议使用签名URL的方式下载文件。

  • 由于OSS暂时不支持Bucket相关的跨域请求,建议在控制台执行Bucket相关操作。

下载SDK:

目前官网文档中的demo都是基于SDK 6.x,版本低于6.x的可参考5.x开发文档,如果要升级到6.x请参考升级文档

安装SDK:

  • 支持的浏览器

    • IE(>=10)

    • Edge

    • 主流版本的Chrome、Firefox、Safari

    • 主流版本的Android、iOS、Windows Phone系统默认浏览器

  • 安装方式

    您可以通过以下任意方式安装Browser.js SDK

  • 浏览器引入(不推荐)

    复制代码
    <!-- 引入在线资源 -->
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script>      
    <!-- 引入本地资源 -->
    <script src="./aliyun-oss-sdk-6.18.1.min.js"></script>
  • 使用npm安装SDK开发包 npm install ali-oss

成功完成后,即可使用import或require进行引用。由于浏览器中原生不支持require模式,因此需要在开发环境中配合相关的打包工具,例如webpackbrowserify等。

复制代码
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

1、同步方式

基于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();                    

2、异步方式

与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);
});                    
相关推荐
KaiwuDB16 分钟前
使用Docker实现KWDB数据库的快速部署与配置
数据库·docker
一只fish39 分钟前
MySQL 8.0 OCP 1Z0-908 题目解析(16)
数据库·mysql
泊浮目1 小时前
未来数据库硬件-网络篇
数据库·架构·云计算
静若繁花_jingjing1 小时前
Redis线程模型
java·数据库·redis
飞翔的佩奇3 小时前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
ZWZhangYu9 小时前
LangChain 构建向量数据库和检索器
数据库·langchain·easyui
feifeigo12310 小时前
升级到MySQL 8.4,MySQL启动报错:io_setup() failed with EAGAIN
数据库·mysql·adb
火龙谷11 小时前
【nosql】有哪些非关系型数据库?
数据库·nosql
焱焱枫12 小时前
Oracle获取执行计划之10046 技术详解
数据库·oracle
qq_3923971214 小时前
Redis常用操作
数据库·redis·wpf