全部产品
Search
文档中心

对象存储 OSS:Browser.js追加上传

更新时间:Nov 12, 2024

追加上传是指通过AppendObject方法在已上传的追加类型文件(Appendable Object)末尾直接追加内容。

注意事项

  • 通过Browser.js SDK追加上传时,必须在Bucket跨域规则中暴露Headers:x-oss-next-append-position,否则无法正常获取追加位置nextAppendPosition,导致上传失败。更多信息,请参见跨域设置

  • 本文以OSS域名新建OSSClient为例。如果您希望通过自定义域名、STS等方式新建OSSClient,请参见初始化

  • 本文以OSS域名新建OSSClient为例。如果您希望通过自定义域名、STS等方式新建OSSClient,请参见新建OSSClient

  • 要追加上传,您必须有oss:PutObject权限。具体操作,请参见为RAM用户授权自定义的权限策略

  • 当文件不存在时,调用AppendObject接口会创建一个追加类型文件。

  • 当文件已存在时,调用AppendObject接口会出现以下几种情况:

    • 如果文件为追加类型文件,且设置的追加位置和文件当前长度相等,则直接在该文件末尾追加内容。

    • 如果文件为追加类型文件,但是设置的追加位置和文件当前长度不相等,则抛出PositionNotEqualToLength异常。

    • 如果文件为非追加类型文件时,例如通过简单上传的文件类型为Normal的文件,则抛出ObjectNotAppendable异常。

示例代码

以下代码用于追加上传:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.17.1.min.js"></script>
  </head>
  <body>
    <input type="file" id="file" />
    <button id="upload">上传</button>
    <script>
      const upload = document.getElementById("upload");

      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
        region: 'yourRegion',
        authorizationV4: true,
        // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // 从STS服务获取的安全令牌(SecurityToken)。
        stsToken: 'yourSecurityToken',
        // 填写Bucket名称。
        bucket: 'examplebucket'
      });

      upload.addEventListener("click", async () => {
        const target = file.files[0];
        // 填写Object完整路径,Object完整路径中不能包含Bucket名称,例如examplefile.txt。
        // 第一次追加上传。返回值为下一次追加的位置。
        const result = await client.append("examplefile.txt", target);

        await client.append("123", result, {
          // 第二次追加。后续追加的位置(position)是追加前文件的长度(Content-Length)。
          position: result.nextAppendPosition,
        });
      });
    </script>
  </body>
</html>

相关文档

  • 关于追加上传的完整代码示例,请参见GitHub示例

  • 关于追加上传的API接口说明,请参见AppendObject