このトピックでは、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シークレットで構成されます。 一時的なアクセス資格情報を取得する方法の詳細については、「一時的なアクセス権限付与に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> ドキュメント </title> </head> <body> <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script> <script type="text/javascript"> // OSS.urlibは、OSS SDK内にカプセル化されたリクエストを送信するためのロジックです。 開発者は、リクエストを送信するライブラリを使用して、STSサーバーにリクエストを送信できます。 // 手順1で構築したSTSサーバーのIPアドレスまたはドメイン名にyour_sts_serverを設定します。 OSS.urllib.request (OSS.urllib.request) "your_sts_server" 、 {method: "GET" }, (err, response) => { if（err）{ リターンアラート (err); } try { result = JSON.parse (レスポンス); } catch (e) { errmsg = "parse sts response info error: " + e.message; リターンアラート (errmsg); } console.log (結果); } ); </script> </body> </html>
オブジェクトのアップロード
次のサンプルコードでは、multipartUpload操作を呼び出してオブジェクトをアップロードする方法の例を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> ドキュメント </title>
</head>
<body>
<button id="submit"> アップロード </button>
<input id="file" type="file" />
<!-- SDKファイルのインポート->
<スクリプト
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({
// バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。
region: "yourRegion" 、
// Security Token Service (STS) から取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。
accessKeyId: "yourAccessKeyId" 、
accessKeySecret: "yourAccessKeySecret" 、
// STSから取得したセキュリティトークンを指定します。
stsToken: "yourSecurityToken" 、
// バケットの名前を指定します。 例: examplebucket.
bucket: "examplebucket" 、
});
const headers = {
// オブジェクトのダウンロード時のwebページのキャッシュ動作を指定します。
"Cache-Control": "no-cache" 、
// オブジェクトのダウンロード時にオブジェクトの名前を指定します。
"Content-Disposition": "example.txt" 、
// オブジェクトのダウンロード時のオブジェクトのコンテンツエンコーディング形式を指定します。
"コンテンツエンコード": "utf-8" 、
// リクエストの有効期間を指定します。 単位：ミリ秒。
有効期限: 「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);
},
// 並列にアップロードできるパーツの数を指定します。
パラレル: 4,
// 各パーツのサイズを指定します。 デフォルト値: 1 MB。 最小値: 100 KB。
partSize: 1024*1024、
// ヘッダー、
// オブジェクトのユーザーメタデータを指定します。 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: "yourHost" 、
/* eslint no-template-curly-in-string: [0] * /
// コールバック要求に含まれるbodyフィールドを指定します。
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> ドキュメント </title>
</head>
<body>
<!-- SDKファイルのインポート->
<スクリプト
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({
// バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。
region: "yourRegion" 、
// STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。
accessKeyId: "yourAccessKeyId" 、
accessKeySecret: "yourAccessKeySecret" 、
// STSから取得したセキュリティトークンを指定します。
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> ドキュメント </title>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>
<script>
const client = new OSS({
// バケットが配置されているリージョンを指定します。 たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンをoss-cn-Hangzhouに設定します。
region: "yourRegion" 、
// STSから取得した一時的なAccessKeyペアを指定します。 AccessKeyペアは、AccessKey IDとAccessKeyシークレットで構成されます。
accessKeyId: 'yourAccessKeyId' 、
accessKeySecret: 'yourAccessKeySecret' 、
// STSから取得したセキュリティトークンを指定します。
stsToken: 'yourSecurityToken' 、
// バケットの名前を指定します。 例: examplebucket.
bucket: "examplebucket" 、
});
async関数リスト (dir) {
try {
// デフォルトでは、最大1,000個のオブジェクトが一覧表示されます。
let result = await client.list();
console.log (結果);
// リスト操作は、前のリスト操作で停止した最後のオブジェクトから続行されます。
if (result.isTruncated) {
let result = await client.list({ marker: result.nextMarker });
}
// 名前がプレフィックス 'ex' で始まるオブジェクトを一覧表示します。
result = await client.list({
プレフィックス: "ex" 、
});
console.log (結果);
// 名前が接頭辞 'ex' で始まり、'example' オブジェクトの後にアルファベット順にあるすべてのオブジェクトをリストします。
result = await client.list({
プレフィックス: "ex" 、
マーカー: "example" 、
});
console.log (結果);
} catch (e) {
console.log(e);
}
}
list();
</script>
</body>
</html>