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

Object Storage Service:再開可能なアップロード

最終更新日:Dec 05, 2024

再開可能アップロードを使用してオブジェクトをobject Storage Service (OSS) にアップロードする前に、再開可能アップロードレコードを格納するチェックポイントファイルのディレクトリを指定できます。 ネットワーク例外またはプログラムエラーのためにオブジェクトのアップロードに失敗した場合、チェックポイントファイルに記録された位置からアップロードタスクが再開され、残りのデータがアップロードされます。

使用上の注意

  • WebpackやBrowserifyなどのパッケージングツールを使用する場合は、npm install ali-OSSコマンドを実行して、oss SDK for Browser.jsをインストールします。

  • ブラウザからOSSバケットにアクセスしたいが、バケットにCORSルールが設定されていない場合、ブラウザはリクエストを拒否します。 したがって、ブラウザからバケットにアクセスする場合は、バケットのCORSルールを設定する必要があります。 詳細については、「インストール」をご参照ください。

  • ほとんどの場合、ブラウザではOSS SDK for Browser.jsが使用されます。 AccessKeyペアが公開されないようにするには、Security Token Service (STS) から取得した一時的なアクセス資格情報を使用してOSSにアクセスすることを推奨します。

    一時的なアクセス資格情報は、AccessKeyペアとセキュリティトークンで構成されます。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与にSTSを使用する」をご参照ください。

サンプルコード

次のサンプルコードは、再開可能アップロードを使用してオブジェクトをアップロードする方法の例を示しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button id="submit">Upload</button>
    <button id="pause">Pause Upload</button>
    <button id="resume">Resume Upload</button>
    <!-- Import the SDK file -->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
       // Specify the region in which the bucket is located. For example, if your 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. The AccessKey pair consists of an AccessKey ID and an AccessKey secret. 
       accessKeyId: 'yourAccessKeyId',
       accessKeySecret: 'yourAccessKeySecret',
       // Specify the security token obtained from STS. 
       stsToken: 'yourSecurityToken',
       // Specify the name of the bucket. Example: examplebucket. 
       bucket: "examplebucket",
    });
      // Create the object to upload by using resumable upload. The size of the object is 100 MB. 
      const fileContent = Array(1024 * 1024 * 100)
        .fill("a")
        .join("");
      const file = new File([fileContent], "multipart-upload-file");
      // Specify the full path of the object that is uploaded to the bucket. Example: exampledir/exampleobject.txt. 
      const name = "test.txt";
      // Define the checkpoint at which the object upload pauses. 
      let abortCheckpoint;
      // Obtain the DOM elements of the upload and the checkpoint. 
      const submit = document.getElementById("submit");
      const pause = document.getElementById("pause");
      // Obtain the DOM elements of the resumable upload task. 
      const resume = document.getElementById("resume");

      // Create a button that is used to upload the object. 
      submit.addEventListener("click", () => {
        client
          .multipartUpload(name, file, {
            progress: (p, cpt, res) => {
              // Assign a value to the checkpoint. 
              abortCheckpoint = cpt;
              console.log(abortCheckpoint);
              // Query the progress of the multipart upload task. 
              console.log(p * 100);
            },
          })
          .then((r) => console.log(r));
      });
      // Create a button that is used to pause the upload of the object. 
      pause.addEventListener("click", () => {
        // Pause the upload. 
        client.cancel();
      });

      const resumeUpload = async () => {
        // Set the number of upload retry operations to 5. 
        try {
          const result = await client.multipartUpload(name, file, {
            checkpoint: abortCheckpoint,
            progress: (p, cpt, res) => {
              // To implement resumable upload, you can save the checkpoint information during the upload. This way, after an upload exception occurs, the checkpoint is passed to multipartUpload as a parameter. Then, the upload is resumed from the byte at which last upload is paused. 
              abortCheckpoint = cpt;
              // Query the progress of the multipart upload task. 
              console.log(p);
            },
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      };

      // Create a button that is used to resume the upload. 
      resume.addEventListener("click", async () => {
        await resumeUpload();
      });
    </script>
  </body>
</html>
            

関連ドキュメント

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