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

普通下载（Browser.js SDK）

最近更新时间：2024.03.07 11:19:12

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

我的收藏

通过 GetObject 方法可以从指定桶中下载对象。在使用此接口之前，确保拥有对此对象的读访问权限。在使用下载接口的过程中可以通过设置进度条回调来获取目前下载数据进度信息。

注意事项

  • 为了避免在浏览器环境中暴露您的火山引擎账号密钥信息（即 AccessKey ID 和 AccessKey Secret），强烈建议您使用临时访问凭证的方式执行 TOS 相关操作，详细说明，请参见使用 STS 临时 AK/SK+Token 访问火山引擎 TOS。
  • Endpoint 为 TOS 对外服务的访问域名。TOS 支持的 Endpoint 信息，请参见访问域名 Endpoint。
  • 下载对象前，您必须具有 tos:GetObject 权限，详细信息，请参见权限配置指南。
  • 对于开启多版本的桶，下载指定版本对象时，您必须具有 tos:GetObjectVersion 权限，详细信息，请参见权限配置指南。
  • 如果应用程序会在同一时刻大量下载同一个对象，您的访问速度会受到 TOS 带宽及地域的限制。建议您使用 CDN 产品，提升性能的同时也能降低您的成本。通过 CDN 访问 TOS 的详细信息，请参见使用 CDN 加速访问 TOS 资源。

示例代码

以下示例代码用于获取 examplebucket 中 exampleobject.txt 文件的预览和下载 URL。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button id="upload">上传</button>
    <button id="preview">获取预览Url</button>
    <button id="download">获取下载Url</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: examplebucket,
      });
      const name = 'exampledir/exampleobject.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 {
          // 分片大小最小为 5MB
          const partSize = 5 * 1024 * 1024;

          const result = await client.uploadFile({
            key: name,
            file: data,
            // 上传时指定分片大小
            partSize,
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      });

      // 获取文件预览的 URL
      const preview = document.getElementById('preview');
      preview.addEventListener('click', async () => {
        try {
          // 设置 URL 的有效时长为 3600 秒。如果不设置时长，默认是 1800 秒。
          const result = await client.getPreSignedUrl({
            key: name,
            expires: 3600,
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      });

      // 获取文件的下载 URL
      const download = document.getElementById('download');
      download.addEventListener('click', async () => {
        try {
          // 设置 URL 的有效时长为 3600 秒。如果不设置时长，默认是 1800 秒。
          const filename = '中文examplefile.txt';
          const result = await client.getPreSignedUrl({
            key: name,
            expires: 3600,
            // 配置响应头实现通过 URL 访问时自动下载文件，并设置下载后的文件名称。
            response: {
              contentDisposition: `attachment; filename=${filename}`,
            },
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      });
    </script>
  </body>
</html>