オブジェクトを部品単位でOSSにアップロードする方法 - Object Storage Service

Object Storage Service (OSS) は、マルチパートアップロード機能を提供します。マルチパートアップロードを使用すると、大きなオブジェクトを複数のパートに分割してアップロードできます。パーツがアップロードされたら、CompleteMultipartUpload操作を呼び出して、パーツを完全なオブジェクトに結合できます。これにより、再開可能な方法でオブジェクトをアップロードできます。

使用上の注意

オブジェクトをパーツでアップロードする前に、マルチパートアップロード機能を理解してください。詳しくは、「マルチパートアップロード」をご参照ください。
WebpackやBrowserifyなどのバンドルツールを使用する場合は、npm install ali-OSSコマンドを実行して、oss SDK for Browser.jsをインストールします。
ブラウザからOSSバケットへのクロスリージョンアクセス要求を開始し、バケットにクロスオリジンリソース共有 (CORS) ルールが設定されていない場合、ブラウザは要求を拒否します。ブラウザからバケットへのクロスオリジンリクエストを許可するには、バケットのCORSルールを設定する必要があります。詳細は、「前提条件 (Prerequisites)」をご参照ください。
ほとんどの場合、ブラウザではOSS SDK for Browser.jsが使用されます。 AccessKeyペアが公開されないようにするには、Security Token Service (STS) から取得した一時的なアクセス資格情報を使用してOSSにアクセスすることを推奨します。
一時的なアクセス資格情報には、セキュリティトークンと、AccessKey IDとAccessKeyシークレットで構成される一時的なAccessKeyペアが含まれます。一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与にSTSを使用する」をご参照ください。

完全なサンプルコード

大きなオブジェクトをアップロードするには、マルチパートアップロードを使用してオブジェクトをパーツ単位でアップロードします。マルチパートアップロードでは、オブジェクトは複数のパートに分割され、別々にアップロードされます。一部のパーツのアップロードに失敗した場合は、オブジェクト全体を再度アップロードするのではなく、アップロードの進行状況に基づいて失敗したパーツのみを再アップロードできます。

重要

サイズが100 MBを超えるオブジェクトをアップロードするには、マルチパートアップロードを使用してアップロードの成功率を上げることを推奨します。マルチパートアップロードを使用してサイズが100 MB未満のオブジェクトをアップロードし、partSizeパラメーターの値が不適切な場合、アップロードの進行状況が完全に表示されないことがあります。サイズが100 MB未満のオブジェクトをアップロードするには、簡易アップロードを使用することを推奨します。

次のサンプルコードは、マルチパートアップロードを使用してローカルファイルexampleobject.txtをexamplebucketにアップロードする方法の例を示しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <button id="submit"> アップロード </button>
    <input id="file" type="file" />
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: "yourRegion" 、
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: "yourAccessKeyId" 、
        accessKeySecret: "yourAccessKeySecret" 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: "yourSecurityToken" 、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
      });

      const headers = {
        // オブジェクトのダウンロード時のwebページのキャッシュ動作を指定します。 
        "Cache-Control": "no-cache" 、
        // オブジェクトのダウンロード時にオブジェクトの名前を指定します。 
        "Content-Disposition": "example.txt" 、
        // オブジェクトのダウンロード時のオブジェクトのコンテンツエンコーディング形式を指定します。 
        "コンテンツエンコード": "utf-8" 、
        // リクエストの有効期間を指定します。 単位：ミリ秒。 
        有効期限: 「1000」、
        // オブジェクトのストレージクラスを指定します。 
        "x-oss-storage-class": "Standard" 、
        // オブジェクトに1つ以上のタグを指定します。 
        "x-oss-tagging": "Tag1=1&Tag2=2" 、
        // マルチパートアップロードタスクの初期化時に、既存のオブジェクトを同じ名前で上書きするかどうかを指定します。 この例では、x-oss-forbid-overwriteパラメーターはtrueに設定されています。 この値は、既存のオブジェクトを同じ名前のオブジェクトで上書きできないことを示します。 
        "x-oss-forbid-overwrite": "true" 、
      };

      // examplebucketバケットにアップロードされるオブジェクトの名前を指定します。 例: exampleobject.txt。 
      const name = "exampleobject.txt";
      // DOMを取得します。 
      const submit = document.getElementById("submit");
      const options = {
        // マルチパートアップロードタスクの進行状況、チェックポイント、および戻り値を照会します。 
        progress :( p, cpt, res) => {
          console.log(p);
        },
        // 並列にアップロードできるパーツの数を指定します。 
        パラレル: 4,
        // パーツサイズを指定します。 デフォルト値: 1 MB。 最小値: 100 KB。 
        partSize: 1024*1024、
        // ヘッダー、
        // オブジェクトのユーザーメタデータを指定します。 HeadObject操作を呼び出して、オブジェクトメタデータを照会できます。 
        meta: { year: 2020, people: "test" },
        mime: "text/plain" 、
      };

      // イベントリスナーを設定します。 
      submit.addEventListener("click", async () => {
        try {
          const data = document.getElementById("file").files[0];
          // マルチパートアップロードタスクを開始します。 
          const res = await client.multipartUpload(name, data, {)
            . .. options,
            // アップロードコールバックを設定します。 
            // コールバックサーバーが必要ない場合は、コールバック設定を削除します。 
            callback: {
              // コールバック要求を受信するサーバーのアドレスを指定します。 
              url: "http://examplebucket.aliyuncs.com:23450" 、
              // コールバック要求のHostヘッダーを指定します。 
              host: "yourHost" 、
              /* eslint no-template-curly-in-string: [0] * /
              // コールバック要求の本文の内容を指定します。 
              body: "bucket =${ bucket}&object =${ object}&var1 =${ x:var1}" 、
              // コールバック要求でContent-Typeを指定します。 
              contentType: "application/x-www-form-urlencoded" 、
              customValue: {
                // コールバック要求のカスタムパラメータを指定します。 
                var1: "value1" 、
                var2: "value2" 、
              },
            },
          });
          console.log(res);
        } catch (err) {
          console.log(err);
        }
      });
    </script>
  </body>
</html>

API操作を呼び出してマルチパートアップロードを実行するときにConnectionTimeoutErrorエラーが発生した場合は、エラーを処理する必要があります。エラーを修正するには、部品サイズを縮小したり、タイムアウト期間を延長したり、リクエストを再送信したりできます。 ConnectionTimeoutErrorエラーをキャプチャして、エラーの特定の原因を分析することもできます。詳細については、「ネットワーク接続タイムアウト処理」をご参照ください。

マルチパートアップロードタスクのキャンセル

client.abortMultipartUploadメソッドを使用して、マルチパートアップロードタスクをキャンセルできます。マルチパートアップロードタスクをキャンセルした場合、アップロードIDを使用してパーツをアップロードすることはできません。アップロードされたパーツは削除されます。

次のコードは、マルチパートアップロードタスクをキャンセルする方法の例を示しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <button id="submit"> アップロード </button>
    <button id="abort"> アップロードをキャンセル </button>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: "yourRegion" 、
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: "yourAccessKeyId" 、
        accessKeySecret: "yourAccessKeySecret" 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: "yourSecurityToken" 、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
      });
      // マルチパートアップロードを使用してバケットにアップロードするローカルファイルを作成します。 ファイルのサイズは100 MBです。 
      const fileContent=配列 (1024*1024*100)
        . fill("a")
        . join("");
      const file = new File([fileContent], "multipart-upload-file");
      // examplebucketバケットにアップロードされるオブジェクトの名前を指定します。 例: exampleobject.txt。 
      const name = "exampleobject.txt";
      // マルチパートアップロードタスクがキャンセルされるチェックポイントを指定します。 
      abortCheckpointを聞かせてください。
      // DOMを照会します。 
      const submit = document.getElementById("submit");
      const abort = document.getElementById("abort");

      // マルチパートアップロードタスクを開始するために使用するボタンを作成します。 
      submit.addEventListener("click", async () => {
        try {
          const res = await client.multipartUpload(name, file, {)
            progress :( p, cpt, res) => {
              // チェックポイントに値を割り当てます。 
              abortCheckpoint = cpt;
              // マルチパートアップロードタスクの進行状況を照会します。 
              console.log(p);
            },
          });
        } catch (err) {
          console.log(err);
        }
      });
      // マルチパートアップロードタスクをキャンセルするためのボタンを作成します。 
      abort.addEventListener("click", () => {
        // マルチパートアップロードタスクをキャンセルします。 
        client.abortMultipartUpload (
          abortCheckpoint.name,
          abortCheckpoint.uploadId
        );
      });
    </script>
  </body>
</html>

アップロードしたパーツの一覧表示

client.listPartsメソッドを使用して、指定したアップロードIDを使用してアップロードされたすべてのパーツを一覧表示できます。

次のコードは、アップロードされたパーツを一覧表示する方法の例です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <button id="submit"> アップロード </button>
    <button id="check"> アップロードしたパーツの一覧 </button>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
         // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
         リージョン: 'yourRegion' 、
         // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
         accessKeyId: 'yourAccessKeyId' 、
         accessKeySecret: 'yourAccessKeySecret' 、
         // STSから取得したセキュリティトークンを指定します。 
        stsToken: 'yourSecurityToken' 、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
      });
      // マルチパートアップロードを使用してバケットにアップロードするローカルファイルを作成します。 ファイルのサイズは100 MBです。 
      const fileContent=配列 (1024*1024*100)
        . fill("a")
        . join("");
      const file = new File([fileContent], "multipart-upload-file");
      // examplebucketバケットにアップロードされるオブジェクトの名前を指定します。 例: exampleobject.txt。 
      const name = "exampleobject.txt";
      // マルチパートアップロードタスクがキャンセルされるチェックポイントを指定します。 
      abortCheckpointを聞かせてください。

      // DOMを照会します。 
      const submit = document.getElementById("submit");
      const check = document.getElementById("check");

      // イベントリスナーを設定します。 
      submit.addEventListener("click", async () => {
        try {
          const res = await client.multipartUpload(name, file, {)
            progress :( p, cpt, res) => {
              // チェックポイントに値を割り当てます。 
              abortCheckpoint = cpt;
              // マルチパートアップロードタスクの進行状況を照会します。 
              console.log("progress =====", p);
            },
          });
        } catch (err) {
          console.log(err);
        }
      });
      // イベントリスナーを設定します。 
      check.addEventListener("click", async () => {
        // アップロードしたパーツを一覧表示します。 
        const result = await client.listParts(name, abortCheckpoint.uploadId);
        console.log (結果);
      });
    </script>
  </body>
</html>

マルチパートアップロードタスクの一覧表示

client.listUploadsメソッドを使用して、開始されたが完了またはキャンセルされていないタスクを含む、進行中のすべてのマルチパートアップロードタスクを一覧表示できます。

次のサンプルコードは、マルチパートアップロードタスクを一覧表示する方法の例を示しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>

  <body>
    <button id="check"> マルチパートアップロードタスクの一覧 </button>
    <!-- SDKファイルのインポート->
    <スクリプト
      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({
         // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
         リージョン: 'yourRegion' 、
         // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
         accessKeyId: 'yourAccessKeyId' 、
         accessKeySecret: 'yourAccessKeySecret' 、
         // STSから取得したセキュリティトークンを指定します。 
        stsToken: 'yourSecurityToken' 、
        // バケットの名前を指定します。 例: examplebucket. 
        bucket: "examplebucket" 、
      });
      // DOMを取得します。 
      const check = document.getElementById("check");

      // イベントリスナーを設定します。 
      check.addEventListener("click", async () => {
        // 開始されたが完了またはキャンセルされていないマルチパートアップロードタスクを照会します。 
        const result = await client.listUploads({ "max-uploads": 100 });
        console.log("uploads" 、result.uploads);
      });
    </script>
  </body>
</html>

参考資料

マルチパートアップロードの実行に使用する完全なサンプルコードについては、『GitHub』をご参照ください。
マルチパートアップロードを実行するために呼び出すことができるAPI操作の詳細については、次のトピックを参照して。
マルチパートアップロードタスクをキャンセルするために呼び出すことができるAPI操作の詳細については、「AbortMultipartUpload」をご参照ください。
アップロードされたパーツを一覧表示するために呼び出すことができるAPI操作の詳細については、「ListParts」をご参照ください。
実行中のすべてのマルチパートアップロードタスクを一覧表示するために呼び出すことができるAPI操作の詳細については、「ListMultipartUploads」をご参照ください。進行中のマルチパートアップロードタスクには、開始されたが完了またはキャンセルされていないタスクが含まれます。

よくある質問

PLeaseがOssのexposure-headersのetagを設定した場合はどうすればよいですか。エラーメッセージが返されますか?

原因
クロスオリジンリソース共有 (CORS) ルールが正しく設定されていません。
解決策
現在のバケットにCORSルールを設定する必要があります。 CORSルールを設定するときに、x-oss-request-idやETagなどの共通ヘッダーを指定します。詳細については、「CORS」をご参照ください。

このリソースでは、操作がサポートされていない場合はどうすればよいですか。エラーメッセージが返されますか?

原因
CompleteMultipartUpload操作を呼び出すときに、オブジェクトのストレージクラスを指定しました。
解決策
CompleteMultipartUpload操作を呼び出すときに、オブジェクトのストレージクラスを指定しないでください。マルチパートアップロード中にオブジェクトのストレージクラスを指定する場合は、InitiateMultipartUpload操作を呼び出します。