このトピックでは、ブラウザのユースケースについて説明します。
前提条件
バケットのクロスドメインルールを設定します。詳細については、「事前準備」をご参照ください。
Security Token Service (STS) サーバーを構築し、クライアントから一時的な権限付与情報を取得します。詳細については、「STS サーバーを構築し、クライアントから一時的な権限付与情報を取得する」をご参照ください。
サポートされているブラウザ
Browser.js SDK は、次のバージョンのブラウザをサポートしています。
IE 10 以降および Edge
重要IE で Browser.js SDK を使用する前に、Promise ライブラリをインポートしてください。
Browser.js SDK はファイル操作に File API を使用しますが、これが古いバージョンのブラウザで問題を引き起こす可能性があります。サードパーティのプラグインを使用して、ファイルのアップロードやダウンロードなどの操作のために Object Storage Service (OSS) API を呼び出すことができます。例については、「Web ベースの直接アップロードプラクティス」をご参照ください。
Chrome、Firefox、Safari の主流バージョン
Android、iOS、Windows Phone の主流バージョンにおけるデフォルトのブラウザ
ブラウザからのファイルのアップロード
次のサンプルコードは、ブラウザからファイルをアップロードする方法を示しています。このサンプルコードでは Bootstrap のスタイルを使用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css"
/>
<style>
.form-group {
margin: 10px;
}
</style>
</head>
<body style="padding: 100px">
<div class="form-group">
<!-- // アップロードするファイルを選択します。 -->
<label>ファイルを選択</label>
<input type="file" id="file" />
</div>
<div class="form-group">
<!-- // OSS にアップロードするファイルの名前を指定します。 -->
<label>名前を付けて保存</label>
<input type="text" class="form-control" id="object-key-file" value="" />
</div>
<div class="form-group">
<!-- // ファイルをアップロードします。 -->
<input
type="button"
class="btn btn-primary"
id="file-button"
value="アップロード"
/>
</div>
<div class="form-group">
<!-- // アップロードの進捗状況を表示します。 -->
<div class="progress">
<div
id="progress-bar"
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
style="min-width: 2em"
>
0%
</div>
</div>
</div>
<!--SDK ファイルをインポートします。-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
// 権限付与サーバーの URL を指定します。例： http://127.0.0.1:8000/sts
const appServer = "yourStsServer";
// バケット名を指定します。例： examplebucket
const bucket = "examplebucket";
// バケットが配置されているリージョンを指定します。たとえば、バケットが中国 (杭州) リージョンにある場合、リージョンを oss-cn-hangzhou に設定します。
const region = "oss-cn-hangzhou";
const urllib = OSS.urllib;
const applyTokenDo = function (func) {
const url = appServer;
return urllib
.request(url, {
method: "GET",
})
.then(function (result) {
const creds = JSON.parse(result.data);
// 一時的なアクセス認証情報を使用して OSS クライアントを作成します。
const client = new OSS({
// yourRegion をバケットが配置されているリージョンに設定します。たとえば、バケットが中国 (杭州) リージョンにある場合、yourRegion を oss-cn-hangzhou に設定します。
region: region,
authorizationV4: true,
accessKeyId: creds.AccessKeyId,
accessKeySecret: creds.AccessKeySecret,
stsToken: creds.SecurityToken,
bucket: bucket,
});
return func(client);
});
};
let currentCheckpoint;
const progress = async function progress(p, checkpoint) {
currentCheckpoint = checkpoint;
const bar = document.getElementById("progress-bar");
bar.style.width = `${Math.floor(p * 100)}%`;
bar.innerHTML = `${Math.floor(p * 100)}%`;
};
let uploadFileClient;
const uploadFile = function (client) {
if (!uploadFileClient || Object.keys(uploadFileClient).length === 0) {
uploadFileClient = client;
}
const file = document.getElementById("file").files[0];
const key =
document.getElementById("object-key-file").value.trim() || "object";
console.log(`${file.name} => ${key}`);
// multipartUpload を使用して選択したファイルをアップロードし、progress パラメーターを使用してプログレスバーを設定します。
const options = {
progress,
partSize: 100 * 1024,
meta: {
year: 2017,
people: "test",
},
};
return client
.multipartUpload(key, file, options)
.then((res) => {
console.log("upload success: %j", res);
currentCheckpoint = null;
uploadFileClient = null;
})
.catch((err) => {
if (uploadFileClient && uploadFileClient.isCancel()) {
console.log("stop-upload!");
} else {
console.error(err);
}
});
};
window.onload = function () {
document.getElementById("file-button").onclick = function () {
applyTokenDo(uploadFile);
};
};
</script>
</body>
</html>
関連ドキュメント
ブラウザアプリケーションの完全なサンプルコードについては、GitHub の例をご参照ください。