デフォルトでは、必要なアクセス権限があれば、新しいオブジェクトは同名の既存オブジェクトを上書きします。このトピックでは、シンプルアップロード、オブジェクトのコピー、マルチパートアップロードにおいて、x-oss-forbid-overwrite リクエストヘッダーを設定することで、この動作を防止する方法について説明します。
注意事項
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='upload'>Upload</button>
<!--SDK ファイルをインポートします。-->
<script 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({
// バケットが配置されているリージョンに yourRegion を設定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、yourRegion を oss-cn-hangzhou に設定します。
region: 'yourRegion',
authorizationV4: true,
// Security Token Service (STS) から取得した一時的な AccessKey ID と AccessKey Secret。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// STS から取得したセキュリティトークン (SecurityToken)。
stsToken: 'yourSecurityToken',
// バケット名を指定します。 例：examplebucket。
bucket: "examplebucket",
});
const upload = document.getElementById('upload')
// アップロードするローカルファイルを指定します。
const fileContent = Array(1024 * 1024 * 10).fill('a').join('')
const fileName = 'example.txt'
const file = new Blob([fileContent])
// 同名のオブジェクトを上書きするかどうかを指定します。 この例では、このパラメーターは true に設定されています。 これは、同名のオブジェクトを上書きできないことを示します。 同名のオブジェクトが存在する場合、エラーが報告されます。
const headers = {
'x-oss-forbid-overwrite': true
}
upload.addEventListener('click', () => {
// ファイルをアップロードします。
client.put(fileName, file, { headers }).then(r => console.log(r))
})
</script>
</body>
</html>ファイルのコピー
次のコードは、オブジェクトをコピーする際に同名のオブジェクトが上書きされるのを防ぐ方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id='upload'>Upload</button>
<!--SDK ファイルをインポートします。-->
<script 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({
// バケットが配置されているリージョンに yourRegion を設定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、yourRegion を oss-cn-hangzhou に設定します。
region: 'yourRegion',
authorizationV4: true,
// Security Token Service (STS) から取得した一時的な AccessKey ID と AccessKey Secret。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// STS から取得したセキュリティトークン (SecurityToken)。
stsToken: 'yourSecurityToken',
// バケット名を指定します。 例：examplebucket。
bucket: "examplebucket",
});
const upload = document.getElementById('upload')
// コピーするファイルを指定します。
const fileContent = Array(1024 * 1024 * 5).fill('a').join('')
const fileName = 'example.txt'
const file = new Blob([fileContent])
// コピー操作中に同名のオブジェクトを上書きするかどうかを指定します。 この例では、このパラメーターは true に設定されています。 これは、同名のオブジェクトを上書きできないことを示します。 同名のオブジェクトが存在する場合、エラーが報告されます。
const headers = {
'x-oss-forbid-overwrite': true
}
upload.addEventListener('click', () => {
// ファイルをコピーします。
// ターゲットファイルの名前を dest.txt に設定します。
client.copy("dest.txt",fileName,{headers}).then(r=>console.log(r))
})
</script>
</body>
</html>マルチパートアップロード
次のコードは、マルチパートアップロード時に同名のオブジェクトが上書きされるのを防ぐ方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="upload">Upload</button>
<!--SDK ファイルをインポートします。-->
<script
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({
// バケットが配置されているリージョンに yourRegion を設定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、yourRegion を oss-cn-hangzhou に設定します。
region: 'yourRegion',
authorizationV4: true,
// Security Token Service (STS) から取得した一時的な AccessKey ID と AccessKey Secret。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// STS から取得したセキュリティトークン (SecurityToken)。
stsToken: 'yourSecurityToken',
// バケット名を指定します。 例：examplebucket。
bucket: "examplebucket",
});
const upload = document.getElementById("upload");
// アップロードするファイルを指定します。
const fileContent = Array(1024 * 1024 * 5)
.fill("a")
.join("");
const fileName = "src.txt";
const file = new Blob([fileContent]);
// 同名のオブジェクトを上書きするかどうかを指定します。 この例では、このパラメーターは true に設定されています。 これは、同名のオブジェクトを上書きできないことを示します。 同名のオブジェクトが存在する場合、エラーが報告されます。
const headers = {
"x-oss-forbid-overwrite": true,
};
upload.addEventListener("click", () => {
// マルチパートアップロードを実行します。
client
.multipartUpload("dest.txt", file, { headers })
.then((r) => console.log(r));
});
</script>
</body>
</html>
関連ドキュメント
シンプルアップロードを実行するために呼び出すことができる API 操作の詳細については、「PutObject」をご参照ください。
オブジェクトをコピーするために呼び出すことができる API 操作の詳細については、「CopyObject」をご参照ください。
Browser.js SDK の
multipartUploadメソッドはマルチパートアップロードに使用され、次の 3 つの API 操作をカプセル化します。マルチパートアップロードを開始するための API 操作の詳細については、「InitiateMultipartUpload」をご参照ください。
パートをアップロードするための API 操作の詳細については、「UploadPart」をご参照ください。
マルチパートアップロードを完了するための API 操作の詳細については、「CompleteMultipartUpload」をご参照ください。