普通预签名（Browser.js SDK）--对象存储-火山引擎

文档中心

立即注册

导航

对象存储

普通预签名（Browser.js SDK）

最近更新时间：2024.02.04 18:31:05首次发布时间：2023.07.08 17:33:01

TosClient 在向服务端发起请求时，默认会对请求 Header 里包含签名。SDK 也支持构造带签名的 URL，用户可直接用该 URL 发起 HTTP 请求，也可以将该 URL 共享给第三方实现访问授权。

预签名说明

TosClient 在向服务端发起请求时，默认会在请求 Header 里包含签名。SDK 也支持构造带签名的 URL，您可以直接使用该 URL 发起 HTTP 请求，也可以将该 URL 共享给第三方实现访问授权。

示例代码

使用预签名的 URL 上传对象

以下代码用于预签名的 URL 向指定桶中上传对象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- 导入 SDK 文件 -->
    <script src="https://tos-public.volccdn.com/obj/volc-tos-public/@volcengine/tos-sdk@latest/browser/tos.umd.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
    <script type="text/javascript">
      const client = new TOS({
        // yourRegion 填写Bucket 所在地域。以华北2（北京)为例，yourRegion 填写为 cn-beijing。
        region: yourRegion,
        // 填写 endpoint 名称。
        endpoint: yourEndpoint,
        // 从 STS 服务获取的临时访问密钥（AccessKey ID 和 AccessKey Secret）。
        accessKeyId: yourAccessKey,
        accessKeySecret: yourSecretKey,
        // 从 STS 服务获取的安全令牌（SecurityToken）。
        stsToken: yourSecurityToken,
        // 填写 Bucket 名称。
        bucket: examplebucket,
      });
      const objectName = 'exampledir/preSignedUrl-put.txt';

      const main = async () => {
        // 预签名对象下载地址，当 method 为 'GET' 时将 URL 复制到浏览器地址栏中即可访问该对象
        const url = client.getPreSignedUrl({
          // method 支持 'GET'/'PUT'/'HEAD'/'DELETE'
          method: 'PUT',
          bucket: examplebucket,
          key: objectName,
        });
        // 预签名地址
        console.log('PreSignedUrl:', url);

        // 使用 axios 发送请求
        const uploadResult = await axios.put(url, 'hello world from PreSignedUrl');

        // 查询刚刚上传对象的大小
        const { data } = await client.headObject({
          bucket: examplebucket,
          key: objectName,
        });

        // object size: 29
        console.log('object size:', data, data['content-length']);
      };

      main();
    </script>
  </body>
</html>

使用预签名的 URL 下载对象

以下代码用于预签名的 URL 向指定桶中下载对象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- 导入 SDK 文件 -->
    <script src="https://tos-public.volccdn.com/obj/volc-tos-public/@volcengine/tos-sdk@latest/browser/tos.umd.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
    <script type="text/javascript">
      const client = new TOS({
        // yourRegion 填写 Bucket 所在地域。以华北2（北京)为例，yourRegion 填写为 cn-beijing。
        region: yourRegion,
        // 填写 endpoint 名称。
        endpoint: yourEndpoint,
        // 从 STS 服务获取的临时访问密钥（AccessKey ID 和 AccessKey Secret）。
        accessKeyId: yourAccessKey,
        accessKeySecret: yourSecretKey,
        // 从 STS 服务获取的安全令牌（SecurityToken）。
        stsToken: yourSecurityToken,
        // 填写 Bucket 名称。
        bucket: examplebucket,
      });
      const objectName = 'exampledir/preSignedUrl-put.txt';

      const main = async () => {
        // 预签名对象下载地址，当 method 为 'GET' 时将 URL 复制到浏览器地址栏中即可访问该对象
        const url = client.getPreSignedUrl({
          // method 支持 'GET'/'PUT'/'HEAD'/'DELETE'
          method: 'GET',
          bucket: examplebucket,
          key: objectName,
        });
        // 预签名地址
        console.log('PreSignedUrl:', url);

        // 使用 axios 发送请求
        const result = await axios.get(url);
        console.log('get result:', result.data);
      };

      main();
    </script>
  </body>
</html>

使用预签名的 URL 删除对象

以下代码用于预签名的 URL 在指定桶中删除对象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- 导入 SDK 文件 -->
    <script src="https://tos-public.volccdn.com/obj/volc-tos-public/@volcengine/tos-sdk@latest/browser/tos.umd.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
    <script type="text/javascript">
      const client = new TOS({
        // yourRegion 填写 Bucket 所在地域。以华北2（北京)为例，yourRegion 填写为 cn-beijing。
        region: yourRegion,
        // 填写 endpoint 名称。
        endpoint: yourEndpoint,
        // 从 STS 服务获取的临时访问密钥（AccessKey ID 和 AccessKey Secret）。
        accessKeyId: yourAccessKey,
        accessKeySecret: yourSecretKey,
        // 从 STS 服务获取的安全令牌（SecurityToken）。
        stsToken: yourSecurityToken,
        // 填写 Bucket 名称。
        bucket: examplebucket,
      });
      const objectName = 'exampledir/preSignedUrl-put.txt';

      const main = async () => {
        // 预签名对象下载地址，当 method 为 'GET' 时将 URL 复制到浏览器地址栏中即可访问该对象
        const url = client.getPreSignedUrl({
          // method 支持 'GET'/'PUT'/'HEAD'/'DELETE'
          method: 'DELETE',
          bucket: examplebucket,
          key: objectName,
        });
        // 预签名地址
        console.log('PreSignedUrl:', url);

        // 使用 axios 发送请求
        const result = await axios.delete(url);
        console.log('delete result:', result);
      };

      main();
    </script>
  </body>
</html>