既定では、既存のオブジェクトと同じ名前のオブジェクトをアップロードすると、既存のオブジェクトはアップロードされたオブジェクトによって上書きされます。 このトピックでは、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シークレットで構成されます。 一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与にSTSを使用する」をご参照ください。
単純なアップロードタスクでの上書きの防止
次のサンプルコードは、単純アップロードで同じ名前のオブジェクトによってオブジェクトが上書きされないようにする方法の例を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="upload">Upload an Object</button>
<!-- Import the SDK file -->
<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({
// 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 STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Specify the security token that you obtained from STS.
stsToken: 'yourSecurityToken',
// Specify the name of the bucket. Example: examplebucket.
bucket: "examplebucket",
});
const upload = document.getElementById('upload')
// Specify the local file that you want to upload.
const fileContent = Array(1024 * 1024 * 10).fill('a').join('')
const fileName = 'example.txt'
const file = new Blob([fileContent])
// Specify whether to overwrite an existing object with the same name. In this example, this parameter is set to true, which specifies that the operation does not overwrite an object that has the same name. If an object with the same name exists in the bucket, OSS returns an error.
const headers = {
'x-oss-forbid-overwrite': true
}
upload.addEventListener('click', () => {
// Upload the local file.
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 an Object</button>
<!-- Import the SDK file -->
<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({
// 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 STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Specify the security token that you obtained from STS.
stsToken: 'yourSecurityToken',
// Specify the name of the bucket. Example: examplebucket.
bucket: "examplebucket",
});
const upload = document.getElementById('upload')
// Specify the object to copy.
const fileContent = Array(1024 * 1024 * 5).fill('a').join('')
const fileName = 'example.txt'
const file = new Blob([fileContent])
// Specify whether to overwrite an existing object with the same name. In this example, this parameter is set to true, which specifies that the operation does not overwrite an object that has the same name. If an object with the same name exists in the bucket, OSS returns an error.
const headers = {
'x-oss-forbid-overwrite': true
}
upload.addEventListener('click', () => {
// Copy the object.
// Rename the copied object to 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 an Object</button>
<!-- Import the SDK file -->
<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({
// 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 STS. The AccessKey pair consists of an AccessKey ID and an AccessKey secret.
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Specify the security token that you obtained from STS.
stsToken: 'yourSecurityToken',
// Specify the name of the bucket. Example: examplebucket.
bucket: "examplebucket",
});
const upload = document.getElementById("upload");
// Specify the object to upload.
const fileContent = Array(1024 * 1024 * 5)
.fill("a")
.join("");
const fileName = "src.txt";
const file = new Blob([fileContent]);
// Specify whether to overwrite an existing object with the same name. In this example, this parameter is set to true, which specifies that the operation does not overwrite an object that has the same name. If an object with the same name exists in the bucket, OSS returns an error.
const headers = {
"x-oss-forbid-overwrite": true,
};
upload.addEventListener("click", () => {
// Start the multipart upload task.
client
.multipartUpload("dest.txt", file, { headers })
.then((r) => console.log(r));
});
</script>
</body>
</html>
関連ドキュメント
シンプルアップロードを実行するために呼び出すことができるAPI操作の詳細については、「PutObject」をご参照ください。
オブジェクトをコピーするために呼び出すことができるAPI操作の詳細については、「CopyObject」をご参照ください。
OSS SDK for Browser.jsがマルチパートアップロードを実行するために使用する
multipartUpload
メソッドには、次の3つのAPI操作が含まれます。マルチパートアップロードタスクを開始するために呼び出すことができるAPI操作。 詳細については、「InitiateMultipartUpload」をご参照ください。
部分的にデータをアップロードするために呼び出すことができるAPI操作。 詳細については、「UploadPart」をご参照ください。
マルチパートアップロードタスクを完了するために呼び出すことができるAPI操作。 詳細については、「CompleteMultipartUpload」をご参照ください。