Unggahan yang dapat dilanjutkan memungkinkan Anda menentukan checkpoint sebelum mengunggah file ke OSS. Jika pengunggahan terganggu oleh kesalahan jaringan atau crash program, proses tersebut dapat dilanjutkan dari checkpoint tersebut.
Catatan penggunaan
Saat menggunakan alat packaging seperti Webpack dan Browserify, instal OSS SDK untuk Browser.js dengan menjalankan perintah npm install ali-oss.
Jika Anda ingin mengakses bucket OSS dari browser tetapi bucket tersebut belum dikonfigurasi dengan aturan CORS, browser akan menolak permintaan tersebut. Oleh karena itu, Anda harus mengonfigurasi aturan CORS pada bucket jika ingin mengaksesnya dari browser. Untuk informasi selengkapnya, lihat Instalasi.
Dalam kebanyakan kasus, OSS SDK untuk Browser.js digunakan di browser. Untuk mencegah pasangan AccessKey Anda terekspos, kami menyarankan agar Anda menggunakan kredensial akses sementara yang diperoleh dari Security Token Service (STS) untuk mengakses OSS.
Kredensial akses sementara terdiri atas pasangan AccessKey dan token keamanan. Pasangan AccessKey mencakup ID AccessKey dan Rahasia AccessKey. Untuk informasi selengkapnya tentang cara memperoleh kredensial akses sementara, lihat Gunakan STS untuk otorisasi akses sementara.
Kode contoh
Kode berikut memberikan contoh unggahan yang dapat dilanjutkan.
<!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>
<!--Impor 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({
// Setel yourRegion ke wilayah tempat bucket berada. Misalnya, jika wilayahnya adalah China (Hangzhou), setel yourRegion ke oss-cn-hangzhou.
region: 'yourRegion',
authorizationV4: true,
// Pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) yang diperoleh dari Security Token Service (STS).
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Token keamanan (SecurityToken) yang diperoleh dari STS.
stsToken: 'yourSecurityToken',
// Tentukan nama bucket, misalnya examplebucket.
bucket: "examplebucket",
});
// Hasilkan file berukuran 100 MB untuk unggah yang dapat dilanjutkan.
const fileContent = Array(1024 * 1024 * 100)
.fill("a")
.join("");
const file = new File([fileContent], "multipart-upload-file");
// Path lengkap objek. Contoh: exampledir/exampleobject.txt.
const name = "test.txt";
// Definisikan checkpoint.
let abortCheckpoint;
// Ambil elemen DOM untuk upload dan pause.
const submit = document.getElementById("submit");
const pause = document.getElementById("pause");
// Ambil elemen DOM untuk resume.
const resume = document.getElementById("resume");
// Tambahkan pendengar ke tombol upload. Pengunggahan dimulai saat Anda mengklik Upload.
submit.addEventListener("click", () => {
client
.multipartUpload(name, file, {
progress: (p, cpt, res) => {
// Tetapkan nilai untuk checkpoint.
abortCheckpoint = cpt;
console.log(abortCheckpoint);
// Dapatkan progres pengunggahan.
console.log(p * 100);
},
})
.then((r) => console.log(r));
});
// Tambahkan pendengar ke tombol pause.
pause.addEventListener("click", () => {
// Hentikan sementara pengunggahan.
client.cancel();
});
const resumeUpload = async () => {
// Tetapkan jumlah percobaan ulang menjadi lima.
try {
const result = await client.multipartUpload(name, file, {
checkpoint: abortCheckpoint,
progress: (p, cpt, res) => {
// Untuk mengimplementasikan unggah yang dapat dilanjutkan, Anda dapat menyimpan informasi checkpoint selama proses pengunggahan. Jika terjadi error pengunggahan, masukkan checkpoint yang telah disimpan sebagai parameter ke multipartUpload. Pengunggahan kemudian akan dilanjutkan dari titik kegagalan terakhir.
abortCheckpoint = cpt;
// Dapatkan progres pengunggahan.
console.log(p);
},
});
console.log(result);
} catch (e) {
console.log(e);
}
};
// Tambahkan pendengar ke tombol resume. Pengunggahan dilanjutkan saat Anda mengklik Resume Upload.
resume.addEventListener("click", async () => {
await resumeUpload();
});
</script>
</body>
</html>
Referensi
Untuk kode contoh lengkap mengenai unggahan yang dapat dilanjutkan, lihat contoh di GitHub.