このトピックでは、ブラウザーでのOSS SDK for Browser.jsの適用について説明します。
前提条件
バケットに対してクロスオリジンリソース共有 (CORS) ルールが設定されています。 詳細については、「インストール」をご参照ください。
STSサーバーがセットアップされ、一時的な許可情報がクライアントから取得されます。 詳細については、「STSサーバーを構築し、クライアントから一時的な権限付与情報を取得する」をご参照ください。
サポートされているブラウザ
OSS SDK for Browser.jsは、次のブラウザをサポートしています。
Internet Explorer 10以降とMicrosoft Edge
重要Internet ExplorerでOSS SDK for Browser.jsを使用するには、promiseライブラリをインポートする必要があります。
OSS SDK for Browser.jsは、File APIを使用してオブジェクトに対する操作を実行します。 したがって、以前のバージョンのブラウザでSDKを使用すると問題が発生する可能性があります。 サードパーティのプラグインを使用してOSS API操作を呼び出し、オブジェクトのアップロードやダウンロードなどの操作を実行することを推奨します。 詳細については、「クライアントへの署名の追加とOSSへのデータのアップロード」をご参照ください。
主流バージョンのGoogle Chrome、Firefox、またはSafari
Android、iOS、またはWindows Phoneで使用される主流バージョンのデフォルトのブラウザ
ブラウザを使用してオブジェクトをアップロードする
次のサンプルコードは、ブラウザーを使用してオブジェクトをアップロードする方法の例を示しています。 ブートストラップはサンプルコードで使用されています。
<!DOCTYPE html>
<html lang="en">
<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">
<! -- // Create a selection box to select the object that you want to upload to OSS. -->
<label>Select file</label>
<input type="file" id="file" />
</div>
<div class="form-group">
<! -- // Create a text box to specify the name of the object that you want to upload to OSS. -->
<label>Store as</label>
<input type="text" class="form-control" id="object-key-file" value="" />
</div>
<div class="form-group">
<! -- // Create a button to upload the object to OSS. -->
<input
type="button"
class="btn btn-primary"
id="file-button"
value="Upload"
/>
</div>
<div class="form-group">
<! -- // Create a progress bar that displays the upload progress. -->
<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>
<!-- 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">
// Specify the address of your authorization server. Example: http://127.0.0.1:8000/sts.
const appServer = "yourStsServer";
// Specify the name of the bucket. Example: examplebucket.
const bucket = "examplebucket";
// 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.
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);
// Use temporary access credentials to create an OSSClient instance.
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: 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}`);
// Use multipartUpload to upload the selected objects and use progress to configure the progress bar.
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』をご参照ください。