ファイル (オブジェクト) のアップロード後に、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 操作の詳細については、「コールバック」をご参照ください。