安装 Browser.js SDK--对象存储-火山引擎

文档中心

立即注册

导航

对象存储

安装 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>