You need to enable JavaScript to run this app.
导航
对象存储
  • 文档首页
    • /
  • 对象存储

安装 Browser.js SDK

最近更新时间：2024.02.04 18:30:57

首次发布时间：2022.07.25 14:32:29

我的收藏

本文介绍安装 Browser.js SDK 的准备工作及安装方式。

准备工作

  • 使用 STS 方式访问：由于火山引擎账号 AccessKey 拥有所有 API 的访问权限，如果部署在客户端，建议您使用 STS 方式临时访问 TOS，更多信息，请参见使用 STS 临时 AK/SK+Token 访问火山引擎 TOS。

  • 设置跨域资源共享（CORS）： 具体操作，请参见跨域访问设置。
    通过浏览器直接访问 TOS 时，CORS 配置规则要求如下：

    参数

    说明

    来源 Origin

    设置精准域名（例如 https://console.volcengine.com）或通配符星号（*）。

    操作 Methods

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

    Allow-Headers

    设置为 *。

    Expose-Headers

    设置为 ETag、x-tos-request-id 和 x-tos-version-id。

    示例图如下。
    图片

SDK 下载地址

TOS Browser.js SDK 源码地址，请参见 TOS Browser.js SDK。

支持的浏览器

TOS Browser.js SDK 支持的浏览器如下：

  • IE 10 及以上版本
  • Edge
  • 主流版本的 Chrome、Firefox、Safari
  • 主流版本的 Android、iOS、Windows Phone 系统默认浏览器

注意事项

由于浏览器环境的特殊性，TOS Browser.js SDK 无法使用以下功能：

  • 操作本地文件：浏览器中不能直接操作本地文件系统，建议使用预签名 URL 的方式下载文件。
  • 由于 TOS 暂时不支持 Bucket 相关的跨域请求，建议您在 TOS 控制台执行 Bucket 相关操作。

安装 SDK

浏览器引入

注意

  • 由于部分浏览器不支持 promise，安装时您需要引入 promise 兼容库。 例如 IE10 和 IE11 需要引入 promise-polyfill。
  • 引入线上资源的方式依赖于 CDN 服务器的稳定性，因此建议您使用离线方式引入资源，即通过本地资源或者自行构建的方式引入。

  • 引入线上资源

    <!-- 引入线上资源 -->
<script src="https://tos-public.volccdn.com/obj/volc-tos-public/@volcengine/tos-sdk@latest/browser/tos.umd.production.min.js"></script>

  • 引入本地资源

    <!-- 引入本地资源，即先将线上资源下载到本地后再进入 -->
<script src="./tos.umd.production.min.js"></script>

在代码中使用 TOS 对象。

<script type="text/javascript">
  const client = new TOS({
    // 从 STS 服务获取的临时访问密钥 AccessKeyId
    accessKeyId: 'Your Access Key',
    // 从 STS 服务获取的临时访问密钥 AccessKeySecret
    accessKeySecret: 'Your Secret Key',
    // 从 STS 服务获取的安全令牌 SessionToken
    stsToken: 'Your Session Token',
    // 填写 Bucket 所在地域。以华北2（北京）为例，Region 填写为cn-beijing
    region: 'Your Region',
    // 填写 Bucket 名称
    bucket: 'Your Bucket',
  });
</script>

使用 npm/yarn 安装 SDK

  • 使用 npm 安装

    npm i @volcengine/tos-sdk

  • 使用 yarn 安装

    yarn add @volcengine/tos-sdk

成功安装完成后，即可使用 import 或 require 进行导入。您可以使用以下命令导入 SDK，使用 ES6 import 导入模块和 CJS 导入命令存在差异。

注意

使用 import 或 require 导入时，您需要在开发环境中配合相关的打包工具，例如 webpack、browserify 等。

  • 使用 import 导入

    import TOS from '@volcengine/tos-sdk';

  • 使用 require 导入

    const { TOS } = require('@volcengine/tos-sdk');

在代码中使用 TOS 对象。

<script type="text/javascript">
  const client = new TOS({
    // 从 STS 服务获取的临时访问密钥 AccessKeyId
    accessKeyId: 'Your Access Key',
    // 从 STS 服务获取的临时访问密钥 AccessKeySecret
    accessKeySecret: 'Your Secret Key',
    // 从 STS 服务获取的安全令牌 SessionToken
    stsToken: 'Your Session Token',
    // 填写 Bucket 所在地域。以华北2（北京）为例，Region 填写为cn-beijing
    region: 'Your Region',
    // 填写 bucket 名称
    bucket: 'Your Bucket',
  });
</script>