本 Topic では、OSS SDK for Browser.js を使用して、オブジェクトのアップロード、ダウンロード、クエリなどの操作を実行する方法について説明します。
前提条件
注意事項
OSS SDK for Browser.js は、ブラウザでのバケット関連の操作をサポートしていません。 OSS SDK for Browser.js は、PutObject や GetObject などのオブジェクト関連の操作のみをサポートします。
ほとんどの場合、OSS SDK for Browser.js はブラウザで使用されます。 AccessKey ペアの漏洩を防ぐため、Security Token Service (STS) から取得した一時的なアクセス認証情報を使用して OSS にアクセスすることを推奨します。
一時的なアクセス認証情報は、AccessKey ペアとセキュリティトークンで構成されます。 AccessKey ペアは、AccessKey ID と AccessKey Secret で構成されます。 一時的なアクセス認証情報を取得する方法の詳細については、「STS を使用した一時的なアクセス権限付与」をご参照ください。
一般的な操作
このセクションでは、OSS SDK for Browser.js を使用した一般的な操作について説明します。
STS サーバーの構築とクライアントからの一時的な権限付与情報の取得
STS サーバーを構築します。
STS サーバーの構築を支援するために、OSS は次の言語の OSS SDK を提供しています：
重要上記のデモは参考用です。 本番環境では、認証やその他の機能に必要なコードを開発する必要があります。
ブラウザから STS サーバーにリクエストを送信し、STS の一時的な権限付与情報を取得します。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script> <script type="text/javascript"> // OSS.urllib は、リクエストを送信するために SDK にカプセル化されたロジックです。 任意のリクエストライブラリを使用して、your_sts_server にリクエストを送信できます。 // your_sts_server を、手順 1 でセットアップした STS サーバーの IP アドレスまたはドメイン名に置き換えます。 OSS.urllib.request( "your_sts_server", { method: "GET" }, (err, response) => { if (err) { return alert(err); } try { result = JSON.parse(response); } catch (e) { errmsg = "STS 応答情報の解析エラー: " + e.message; return alert(errmsg); } console.log(result); } ); </script> </body> </html>
オブジェクトのアップロード
multipartUpload インターフェイスを呼び出してファイルをアップロードできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="submit">Upload</button>
<input id="file" type="file" />
<!--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({
// バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、Region を oss-cn-hangzhou に設定します。
region: "yourRegion",
authorizationV4: true,
// STS から取得した一時的な AccessKey ID と AccessKey Secret。
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// STS から取得したセキュリティトークン。
stsToken: "yourSecurityToken",
// バケット名を指定します (例: examplebucket)。
bucket: "examplebucket",
});
const headers = {
// オブジェクトがダウンロードされる際の Web ページのキャッシュ動作を指定します。
"Cache-Control": "no-cache",
// オブジェクトがダウンロードされる際のオブジェクト名を指定します。
"Content-Disposition": "example.txt",
// 有効期限をミリ秒単位で指定します。
Expires: "1000",
// オブジェクトのストレージクラスを指定します。
"x-oss-storage-class": "Standard",
// オブジェクトのタグを指定します。 複数のタグを指定できます。
"x-oss-tagging": "Tag1=1&Tag2=2",
// マルチパートアップロードを初期化する際に、同名のオブジェクトを上書きするかどうかを指定します。 値が true の場合、上書きは禁止されます。
"x-oss-forbid-overwrite": "true",
};
// examplebucket にアップロードするオブジェクトの名前を指定します (例: exampleobject.txt)。
const name = "exampleobject.txt";
// DOM を取得します。
const submit = document.getElementById("submit");
const options = {
// マルチパートアップロードの進捗、チェックポイント、および戻り値を取得します。
progress: (p, cpt, res) => {
console.log(p);
},
// 同時にアップロードするパートの数を設定します。
parallel: 4,
// パートサイズを設定します。 デフォルト値は 1 MB です。 最小値は 100 KB、最大値は 5 GB です。 最後のパートのサイズは 100 KB 未満でもかまいません。
partSize: 1024 * 1024,
// headers,
// カスタムメタデータ。 HeadObject 操作を呼び出すことで、オブジェクトのメタデータを取得できます。
meta: { year: 2020, people: "test" },
mime: "text/plain",
};
// ボタンにリスナーを追加します。
submit.addEventListener("click", async () => {
try {
const data = document.getElementById("file").files[0];
// マルチパートアップロードを実行します。
const res = await client.multipartUpload(name, data, {
...options,
// アップロードコールバックを設定します。
// コールバックサーバーが関与しない場合は、コールバック設定を削除します。
callback: {
// コールバックリクエストのサーバーアドレスを設定します。
url: "http://examplebucket.aliyuncs.com:23450",
// コールバックリクエストのヘッダーに Host 値を設定します。 これは、ご利用のサーバーで設定された Host 値です。
host: "yourHost",
/* eslint no-template-curly-in-string: [0] */
// コールバックが開始されたときのリクエストボディの値を設定します。
body: "bucket=${bucket}&object=${object}&var1=${x:var1}",
// コールバックリクエストの Content-Type を設定します。
contentType: "application/x-www-form-urlencoded",
customValue: {
// コールバックリクエストのカスタムパラメーターを設定します。
var1: "value1",
var2: "value2",
},
},
});
console.log(res);
} catch (err) {
console.log(err);
}
});
</script>
</body>
</html>
オブジェクトのダウンロード
OSS は、オブジェクトのダウンロードリンクとして署名付き URL を生成します。 このリンクを使用してオブジェクトをダウンロードできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--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({
// region をバケットが配置されているリージョンに設定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、region を oss-cn-hangzhou に設定します。
region: "yourRegion",
authorizationV4: true,
// STS から取得した一時的な AccessKey ペア (AccessKey ID と AccessKey Secret)。
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// STS から取得したセキュリティトークン (SecurityToken)。
stsToken: "yoursecurityToken",
// バケット名を指定します。
bucket: "examplebucket",
});
// URL 経由でアクセスされたときにファイルを自動的にダウンロードし、そのファイル名を設定するように応答ヘッダーを設定します。
const filename = "examplefile.txt";
const response = {
"content-disposition": `attachment; filename=${encodeURIComponent(
filename
)}`,
};
// オブジェクトの完全なパスを指定します。 完全なパスにバケット名を含めることはできません。
const url = client.signatureUrl("exampleobject.txt", { response });
console.log(url);
</script>
</body>
</html>オブジェクトのリスト
次のサンプルコードは、オブジェクトをリストする方法の例を示しています：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>
<script>
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",
});
async function list(dir) {
try {
// デフォルトでは、最大 1,000 個のファイルが返されます。
let result = await client.list();
console.log(result);
// 前回のリスト操作で最後に読み取られたファイルの次のファイルからファイルリストの取得を続行します。
if (result.isTruncated) {
result = await client.list({ marker: result.nextMarker });
}
// プレフィックスが 'ex' のファイルをリストします。
result = await client.list({
prefix: "ex",
});
console.log(result);
// プレフィックスが 'ex' で、名前がアルファベット順で 'example' の後にあるファイルをリストします。
result = await client.list({
prefix: "ex",
marker: "example",
});
console.log(result);
} catch (e) {
console.log(e);
}
}
list();
</script>
</body>
</html>