再開可能なアップロードでは、ファイルを Object Storage Service (OSS) にアップロードする前にチェックポイントを指定できます。ネットワークエラーやプログラムのクラッシュによってアップロードが中断された場合、チェックポイントからアップロードを再開できます。
注意事項
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 を使用した一時的なアクセス権限付与」をご参照ください。
サンプルコード
以下のコードは、再開可能なアップロードの例です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="submit">Upload</button>
<button id="pause">Pause</button>
<button id="resume">Resume Upload</button>
<!-- 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({
// バケットが配置されているリージョンに 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",
});
// 再開可能なアップロード用に 100 MB のファイルを生成します。
const fileContent = Array(1024 * 1024 * 100)
.fill("a")
.join("");
const file = new File([fileContent], "multipart-upload-file");
// オブジェクトの完全なパス。例：exampledir/exampleobject.txt。
const name = "test.txt";
// チェックポイントを定義します。
let abortCheckpoint;
// アップロードと一時停止の DOM 要素を取得します。
const submit = document.getElementById("submit");
const pause = document.getElementById("pause");
// 再開の DOM 要素を取得します。
const resume = document.getElementById("resume");
// アップロードボタンにリスナーを追加します。「Upload」をクリックするとアップロードが開始されます。
submit.addEventListener("click", () => {
client
.multipartUpload(name, file, {
progress: (p, cpt, res) => {
// チェックポイントに値を割り当てます。
abortCheckpoint = cpt;
console.log(abortCheckpoint);
// アップロードの進捗を取得します。
console.log(p * 100);
},
})
.then((r) => console.log(r));
});
// 一時停止ボタンにリスナーを追加します。
pause.addEventListener("click", () => {
// アップロードを一時停止します。
client.cancel();
});
const resumeUpload = async () => {
// リトライ回数を 5 に設定します。
try {
const result = await client.multipartUpload(name, file, {
checkpoint: abortCheckpoint,
progress: (p, cpt, res) => {
// 再開可能なアップロードを実装するには、アップロード中にチェックポイント情報を保存します。アップロードエラーが発生した場合、保存されたチェックポイントをパラメーターとして multipartUpload に渡します。これにより、アップロードは最後の失敗箇所から再開されます。
abortCheckpoint = cpt;
// アップロードの進捗を取得します。
console.log(p);
},
});
console.log(result);
} catch (e) {
console.log(e);
}
};
// 再開ボタンにリスナーを追加します。「Resume Upload」をクリックするとアップロードが続行されます。
resume.addEventListener("click", async () => {
await resumeUpload();
});
</script>
</body>
</html>
関連ドキュメント
再開可能なアップロードの完全なサンプルコードについては、「GitHub の例」をご参照ください。