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

管理对象元信息（Browser.js SDK）

最近更新时间：2024.02.04 18:31:06

首次发布时间：2023.07.08 17:33:01

我的收藏

对象元信息是对象的属性描述，包括 HTTP 标准属性（HTTP Header）和用户自定义元数据（User Meta）两种。

注意事项

  • 为了避免在浏览器环境中暴露您的火山引擎账号密钥信息（即 AccessKey ID 和 AccessKey Secret），强烈建议您使用临时访问凭证的方式执行 TOS 相关操作，详细说明，请参见使用 STS 临时 AK/SK+Token 访问火山引擎 TOS。
  • Endpoint 为 TOS 对外服务的访问域名。TOS 支持的 Endpoint 信息，请参见访问域名 Endpoint。
  • 只有对象拥有者，具备设置对象元数据权限。
  • 设置用户自定义元数据时，英文字母自定义元数据 Key 只支持小写，不支持空格等特殊字符。

参数说明

通过 TOS Browser SDK 可以添加和修改已经上传对象的元数据信息。TOS 支持携带以下请求头来修改对象元数据，在下载对象或者 HEAD 对象时，这些值会设置到 HTTP 头域中返回给客户端。请求头如下所示：

名称

说明

Content-Type

对象类型。

Cache-Control

指定该对象被下载时网页的缓存行为。

Expires

RFC2616 中定义的缓存失效时间。

Content-Disposition

对象被下载时的名称。

Content-Encoding

对象被下载时的内容编码类型。

Content-Language

对象被下载时的内容语言格式。

x-tos-meta-*

使用 SDK 设置 Meta字段时设置的元数据信息。当查询此对象时，元数据将会在返回消息的 Header 中。

示例代码

普通上传时设置元数据信息

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button id="upload">上传</button>
    <input id="file" type="file" />
    <!-- 导入 SDK 文件 -->
    <script src="https://tos-public.volccdn.com/obj/volc-tos-public/@volcengine/tos-sdk@latest/browser/tos.umd.production.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/putObjectobject.txt';

      const upload = document.getElementById('upload');
      upload.addEventListener('click', async () => {
        // 从输入框获取 file 对象，例如 <input type="file" id="file" />。
        const data = document.getElementById('file').files[0];
        console.log('data', data);

        try {
          const result = await client.uploadFile({
            key: objectName,
            file: data,
            headers: {
              // 设置为普通文本
              'content-type': 'text/plain',
              // 过期时间为 2028 年
              expires: new Date('2028/01/01'),
            },
          });
          console.log(result);

          // 查询刚刚上传对象的信息
          const headobject = await client.headObject({
            bucket: examplebucket,
            key: objectName,
          });
          // object info
          console.log('object info:', headobject.data);
        } catch (e) {
          console.log(e);
        }
      });
    </script>
  </body>
</html>

通过 SetObjectMeta 设置对象元数据信息

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button id="upload">上传</button>
    <input id="file" type="file" />
    <!-- 导入 SDK 文件 -->
    <script src="https://tos-public.volccdn.com/obj/volc-tos-public/@volcengine/tos-sdk@latest/browser/tos.umd.production.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: bucketName,
      });
      const objectName = 'exampledir/putObjectobject.txt';

      const main = async () => {
        // 查询对象的元信息
        const { data } = await client.headObject({
          bucket: bucketName,
          key: objectName,
        });
        // object info
        console.log('object info:', data);
        console.log('object content-type:', data['content-type']);
        console.log('object expires:', data.expires);

        await client.setObjectMeta({
          bucket: bucketName,
          key: objectName,
          headers: {
            'Content-Language': 'zh-cn',
            'Content-Type': 'text/html',
            Expires: new Date('2030'),
          },
        });

        // 查询对象的元信息
        const { data: newData } = await client.headObject({
          bucket: bucketName,
          key: objectName,
        });
        // object info
        console.log('object info:', newData);
        console.log('object content-type:', newData['content-type']);
        console.log('object expires:', newData.expires);
        console.log('object content-language:', newData['content-language']);
      };

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

查询对象元数据信息（判断对象是否存在）

注意

获取对象元数据前，您必须具有 tos:GetObject 权限，详细信息，请参见 IAM 策略概述。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button id="upload">上传</button>
    <input id="file" type="file" />
    <!-- 导入 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="./const.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: bucketName,
      });
      const objectName = 'exampledir/putObjectobject.txt';

      const main = async () => {
        // 查询对象的元信息
        const { data } = await client.headObject({
          bucket: bucketName,
          key: objectName,
        });
        // object info
        console.log('object info:', data);
      };

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