このトピックでは、PutObject 操作を呼び出してファイル、BLOB データ、またはバッファーを Object Storage Service (OSS) にアップロードする方法について説明します。シンプルアップロードでは進捗状況関数は使用できません。
前提条件
OSS SDK for Browser.js がインストールされていること。 詳細については、「インストール」をご参照ください。
注意事項
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 を使用した一時的なアクセス権限付与」をご参照ください。
権限
デフォルトでは、Alibaba Cloud アカウントはすべての権限を持っています。 Alibaba Cloud アカウント下の RAM ユーザーまたは RAM ロールは、デフォルトではいかなる権限も持っていません。 Alibaba Cloud アカウントまたはアカウント管理者は、RAM ポリシーまたはバケットポリシーを通じて操作権限を付与する必要があります。
API | アクション | 定義 |
PutObject |
| オブジェクトをアップロードします。 |
| オブジェクトのアップロード時に、 | |
| オブジェクトのアップロード時に、オブジェクトのメタデータに | |
|
サンプルコード
BLOB (Binary Large Object) は大きなバイナリオブジェクトです。
以下のコードは、examplebucket バケットの exampledir ディレクトリにある exampleobject.txt という名前のオブジェクトにデータをアップロードする例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input id="file" type="file" />
<button id="upload">オブジェクトのアップロード</button>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
<script>
const client = new OSS({
// バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンを oss-cn-hangzhou に設定します。
region: "yourRegion",
authorizationV4: true,
// STS から取得した一時的な AccessKey ペアを指定します。 AccessKey ペアは、AccessKey ID と AccessKey Secret で構成されます。
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// STS から取得したセキュリティトークンを指定します。
stsToken: "yourSecurityToken",
// バケット名を指定します。
bucket: "examplebucket",
});
// ドロップダウンリストからローカルファイルを選択します。 例： <input type="file" id="file" />。
let data;
// Blob データを作成して指定します。
//const data = new Blob(['Hello OSS']);
// OSS バッファーを作成し、OSS バッファーのコンテンツを指定します。
//const data = new OSS.Buffer(['Hello OSS']);
const upload = document.getElementById("upload");
async function putObject(data) {
try {
// オブジェクトの完全なパスを指定します。 完全なパスにバケット名を含めないでください。
// オブジェクト名またはオブジェクトの完全なパスを指定して、現在のバケットまたはバケット内の特定のディレクトリにデータをアップロードします。 たとえば、オブジェクト名を exampleobject.txt に設定するか、オブジェクトのパスを exampledir/exampleobject.txt に設定します。
// データはファイル、Blob データ、または OSS バッファーに設定できます。
const options = {
meta: { temp: "demo" },
mime: "json",
headers: { "Content-Type": "text/plain" },
};
const result = await client.put("examplefile.txt", data, options);
console.log(result);
} catch (e) {
console.log(e);
}
}
upload.addEventListener("click", () => {
const data = file.files[0];
putObject(data);
});
</script>
</body>
</html>
よくある質問
シンプルアップロードでアップロードの進捗状況を取得できますか？
いいえ、できません。 アップロードの進捗状況は、マルチパートアップロード (Browser.js SDK) と 再開可能なアップロード (Browser.js SDK) でのみ利用可能です。