すべてのプロダクト
Search
ドキュメントセンター

Object Storage Service:OSS SDK for Browser.jsを使用したアップロードの追加

最終更新日:Dec 03, 2024

AppendObject操作を呼び出して、既存の追加可能オブジェクトにコンテンツを追加できます。

使用上の注意

  • OSS SDK for Browser.jsを使用してバケットへの追加アップロードを実行する場合は、バケットに設定されたCORSルールでExpose Headersをx-oss-next-append-positionに設定する必要があります。 それ以外の場合、nextAppendPositionは取得できません。 その結果、アップロードは失敗します。 詳細については、「CORS」をご参照ください。

  • このトピックでは、OSSエンドポイントを使用してOSSClientインスタンスを作成します。 カスタムドメイン名またはSTS (Security Token Service) を使用してOSSClientインスタンスを作成する場合は、「初期化」をご参照ください。

  • このトピックでは、OSSエンドポイントを使用してOSSClientインスタンスを作成します。 カスタムドメイン名またはSecurity Token Service (STS) を使用してOSSClientインスタンスを作成する場合は、「OSSClientインスタンスの作成」をご参照ください。

  • 追加アップロードを使用するには、oss:PutObject権限が必要です。 詳細については、「RAMユーザーへのカスタムポリシーのアタッチ」をご参照ください。

  • コンテンツを追加するオブジェクトが存在しない場合、AppendObject操作によって追加可能なオブジェクトが作成されます。

  • コンテンツを追加するオブジェクトが存在する場合、AppendObject操作を呼び出すと次のような状況が発生します。

    • オブジェクトが追加可能オブジェクトであり、追加操作の開始位置が現在のオブジェクトサイズに等しい場合、オブジェクトはオブジェクトの最後に追加されます。

    • オブジェクトが追加可能オブジェクトであり、追加操作の開始位置が現在のオブジェクトサイズと等しくない場合、PositionNotEqualToLengthエラーが返されます。

    • オブジェクトが追加可能オブジェクトでない場合、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">Upload Object</button>
    <script>
      const upload = document.getElementById("upload");

      const client = new OSS({
        // Specify the region in which the bucket is located. For example, if the bucket is located in the China (Hangzhou) region, set the region to oss-cn-hangzhou. 
        region: 'yourRegion',
        authorizationV4: true,
        // Specify the temporary AccessKey pair obtained from STS. 
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Specify the security token obtained from STS. 
        stsToken: 'yourSecurityToken',
        // Specify the name of the bucket. 
        bucket: 'examplebucket'
      });

      upload.addEventListener("click", async () => {
        const target = file.files[0];
        // Specify the full path of the object. Do not include the bucket name in the full path. Example: examplefile.txt. 
        // Perform the first append upload operation. The position from which the next append operation starts is included in the response. 
        const result = await client.append("examplefile.txt", target);

        await client.append("123", result, {
          // Perform the second append operation. The position from which the next append operation starts is the current length of the object, which is specified by Content-Length. 
          position: result.nextAppendPosition,
        });
      });
    </script>
  </body>
</html>

関連ドキュメント

  • 追加アップロードの実行に使用される完全なサンプルコードについては、『GitHub』をご参照ください。

  • 追加アップロードを実行するために呼び出すことができるAPI操作の詳細については、「AppendObject」をご参照ください。