アップロードコールバックを設定するには、必要なコールバックパラメーターをObject Storage Service (OSS) に送信されるアップロードリクエストに追加するだけです。
サーバ名表示 (SNI) は、コールバック要求が開始されたときに送信することができる。 詳細については、「コールバック」をご参照ください。
使用上の注意
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 Callbacks</button>
<!-- Import the SDK file -->
<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({
// Specify the region in which the bucket is located. For example, if the 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 Security Token Service (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",
});
const options = {
callback: {
// Specify the public endpoint of the server that receives the callback request.
url: "http://examplebucket.aliyuncs.com:23450",
// Specify the Host field included in the callback request header.
// host: 'yourHost',
// Specify the body field included in the callback request.
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}",
// Specify the Content-Type field in the callback request.
// contentType: 'application/x-www-form-urlencoded',
// Specify whether OSS sends Server Name Indication (SNI) to the origin address specified by callbackUrl when a callback request is initiated from the client.
callbackSNI: true,
// Configure the custom parameters for the callback request.
customValue: {
var1: "value1",
var2: "value2",
},
},
};
// Query DOM.
const submit = document.getElementById("submit");
// Implement the upload callback.
submit.addEventListener("click", () => {
client
.put("example.txt", new Blob(["Hello World"]), options)
.then((r) => console.log(r));
});
</script>
</body>
</html>
関連ドキュメント
アップロードコールバックを設定するために呼び出すことができるAPI操作の詳細については、「コールバック」をご参照ください。