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

Object Storage Service:アップロードコールバック (Browser.js SDK)

最終更新日:Nov 30, 2025

ファイル (オブジェクト) のアップロード後に、OSS からアプリケーションサーバにコールバックを送信するように設定するには、アップロードリクエストにコールバックパラメーターを含めるだけで済みます。

説明

コールバックには、`callbackSNI` などの設定を構成できます。詳細については、「コールバック」をご参照ください。

注意事項

  • 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 Secret で構成されます。一時的なアクセス認証情報を取得する方法の詳細については、「STS を使用した一時的なアクセス権限付与」をご参照ください。

コード例

以下にアップロードコールバックのコード例を示します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <button id="submit">Upload Callback</button>
    <!--SDK ファイルをインポートします-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.16.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // バケットが配置されているリージョンに yourRegion を設定します。たとえば、バケットが中国 (杭州) リージョンにある場合、yourRegion を oss-cn-hangzhou に設定します。
        region: "yourRegion",
        authorizationV4: true,
        // Security Token Service (STS) から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret)。
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // STS サービスから取得したセキュリティトークン (SecurityToken)。
        stsToken: "yourSecurityToken",
        // バケット名を指定します。例:examplebucket。
        bucket: "examplebucket",
      });

      const options = {
        callback: {
          // コールバックリクエストのサーバーアドレス。このアドレスはインターネット URL である必要があります。
          url: "http://examplebucket.aliyuncs.com:23450",
          // コールバックリクエストヘッダーの Host の値。これは、サーバーで設定された Host の値です。
          // host: 'yourHost',
          // コールバックのリクエストボディの値。
          body: "bucket=${bucket}&object=${object}&etag=${etag}&size=${size}&mimeType=${mimeType}&imageInfo.height=${imageInfo.height}&imageInfo.width=${imageInfo.width}&imageInfo.format=${imageInfo.format}&var1=${x:var1}&var2=${x:var2}",
          // コールバックリクエストの Content-Type。
          // contentType: 'application/x-www-form-urlencoded',
          // クライアントがコールバックリクエストを開始したときに、OSS が callbackUrl で指定されたソース URL にサーバ名表示 (SNI) を送信するかどうかを指定します。
          callbackSNI: true,
          // コールバックリクエストのカスタムパラメーター。
          customValue: {
            var1: "value1",
            var2: "value2",
          },
        },
      };
      // DOM を取得します。
      const submit = document.getElementById("submit");
      // アップロードコールバック。
      submit.addEventListener("click", () => {
        client
          .put("example.txt", new Blob(["Hello World"]), options)
          .then((r) => console.log(r));
      });
    </script>
  </body>
</html>

関連ドキュメント

アップロードコールバックの API 操作の詳細については、「コールバック」をご参照ください。