普通上传（Browser.js SDK）--对象存储-火山引擎

文档中心

立即注册

导航

对象存储

普通上传（Browser.js SDK）

最近更新时间：2024.06.20 16:06:43首次发布时间：2022.07.25 14:32:29

当您上传的文件小于 5GiB 时，您可以使用简单上传的方式（即 PutObject 方式），将文件或数据上传到 TOS。

注意事项

为了避免在浏览器环境中暴露您的火山引擎账号密钥信息（即 AccessKey ID 和 AccessKey Secret），强烈建议您使用临时访问凭证的方式执行 TOS 相关操作，详细说明，请参见使用 STS 临时 AK/SK+Token 访问火山引擎 TOS。
Endpoint 为 TOS 对外服务的访问域名。TOS 支持的 Endpoint 信息，请参见访问域名 Endpoint。
上传对象前，您必须具有 tos:PutObject 权限，详细信息，请参见权限配置指南。
上传对象时，对象名必须满足一定规范，详细信息，请参见对象命名规范。
TOS 是面向海量存储设计的分布式对象存储产品，内部分区存储了对象索引数据。为横向扩展您上传对象和下载对象时的最大吞吐量和减小热点分区的概率，请您避免使用字典序递增的对象命名方式，详细信息，请参见性能优化。
如果桶中已经存在同名对象，则新对象会覆盖已有的对象。如果您的桶开启了版本控制，则会保留原有对象，并生成一个新版本号用于标识新上传的对象。

示例代码

以下代码用于上传数据到 examplebucket 中 exampledir 目录下的 exampleobject.txt 文件。

<!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 headers = {
        // 指定该 Object 被下载时网页的缓存行为。
        // 'Cache-Control': 'no-cache',
        // 指定过期时间。
        // 'Expires': 'Wed, 08 Jul 2022 16:57:01 GMT',
        // 指定 Object 的存储类型。
        // 'x-tos-storage-class': 'Standard',
        // 指定 Object 的访问权限。
        // 'x-tos-acl': 'private',
      };

      async function putObject(data) {
        try {
          // 填写 Object 完整路径。Object 完整路径中不能包含 Bucket 名称。
          // 您可以通过自定义文件名（例如 exampleobject.txt）或文件完整路径（例如 exampledir/exampleobject.txt）的形式实现将数据上传到当前 Bucket 或 Bucket 中的指定目录。
          // data 对象可以自定义为 File 对象、Blob 数据。
          const result = await client.putObject({
            key: "exampledir/exampleobject.txt",
            body: data,
            // headers,
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

      const upload = document.getElementById("upload");
      upload.addEventListener("click", () => {
        // 从输入框获取 file 对象，例如<input type="file" id="file" />。
        const data = document.getElementById("file").files[0];
        console.log("data", data);
        // 或者创建并填写 Blob 数据。
        // const data = new Blob(['Hello TOS']);

        putObject(data);
      });
    </script>
  </body>
</html>