OSS SDK for Browser.jsを使用して簡単なアップロードを実行するにはどうすればよいですか? - Object Storage Service

このトピックでは、PutObject操作を呼び出して、ファイル、Blobデータ、またはObject Storage Service (OSS) バッファーをOSSにアップロードする方法について説明します。プログレス関数は、単純アップロードでは使用できません。

前提条件

OSS SDK for Browser.jsがインストールされています。詳細については、「インストール」をご参照ください。

使用状況ノート

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を使用する」をご参照ください。

サンプルコード

説明

Blobは大きなバイナリオブジェクトを示します。詳細は、「Blob」をご参照ください。

次のコードは、単純アップロードを使用して、examplebucketバケット内のexampledirディレクトリのexampleobject.txtという名前のオブジェクトにデータをアップロードする方法の例を示しています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title> ドキュメント </title>
  </head>
  <body>
    <input id="file" type="file" />
    <button id="upload"> オブジェクトのアップロード </button>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
    <script>
      const client = new OSS({
        // バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。 
        region: "yourRegion" 、
        // STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。 
        accessKeyId: "yourAccessKeyId" 、
        accessKeySecret: "yourAccessKeySecret" 、
        // STSから取得したセキュリティトークンを指定します。 
        stsToken: "yourSecurityToken" 、
        // バケットの名前を指定します。 
        bucket: "examplebucket" 、
      });

      // ドロップダウンリストからローカルファイルを選択します。 例: <input type="file" id="file" /> 
      データを許可します。
      // Blobデータを作成して指定します。 
      // const data = new Blob(['Hello OSS']);
      // OSSバッファーを作成し、OSSバッファーの内容を指定します。 
      // const data = new OSS.Buffer(['Hello OSS']);

      const upload = document.getElementById("upload");

      async関数putObject(data) {
        try {
          // オブジェクトのフルパスを指定します。 バケット名をフルパスに含めないでください。 
          // 現在のバケットまたはバケット内の特定のディレクトリにデータをアップロードするオブジェクト名またはオブジェクトの完全パスを指定します。 たとえば、オブジェクト名をexampleobject.txtに設定するか、オブジェクトのパスをexampledir/exampleobject.txtに設定します。 
          // データをファイル、Blobデータ、またはOSSバッファに設定できます。 
          const options = {
            meta: { temp: "demo"} 、
            mime: "json" 、
            ヘッダー: { "Content-Type": "text/plain"} 、
          };
          const result = await client.put("examplefile.txt" 、データ、オプション);
          console.log (結果);
        } catch (e) {
          console.log(e);
        }
      }

      upload.addEventListener("click", () => {
        const data = file.files[0];
        putObject (データ);
      });
    </script>
  </body>
</html>

よくある質問

シンプルアップロードのアップロードの進行状況を取得できますか?

いいえ。マルチパートアップロードと再開可能アップロードのみのアップロードの進行状況を取得できます。詳細については、「マルチパートアップロード」および「再開可能アップロード」をご参照ください。

参考資料

簡単なアップロードの実行に使用する完全なサンプルコードについては、『GitHub』をご参照ください。
シンプルアップロードを実行するために呼び出すことができるAPI操作の詳細については、「PutObject」をご参照ください。