Topik ini menjelaskan cara menggunakan OSS SDK untuk Browser.js guna melakukan operasi seperti mengunggah, mengunduh, dan mengkueri objek.
Prasyarat
Catatan penggunaan
OSS SDK untuk Browser.js tidak mendukung operasi yang berkaitan dengan bucket di browser. SDK ini hanya mendukung operasi yang berkaitan dengan objek, seperti PutObject dan GetObject.
Dalam kebanyakan kasus, OSS SDK untuk Browser.js digunakan di browser. Untuk mencegah pasangan AccessKey Anda terekspos, kami menyarankan agar Anda menggunakan kredensial akses temporary yang diperoleh dari Security Token Service (STS) untuk mengakses OSS.
Kredensial akses temporary terdiri atas pasangan AccessKey dan token keamanan. Pasangan AccessKey terdiri atas ID AccessKey dan Rahasia AccessKey. Untuk informasi selengkapnya tentang cara memperoleh kredensial akses temporary, lihat Gunakan STS untuk otorisasi akses temporary.
Operasi umum
Bagian ini menjelaskan operasi umum menggunakan OSS SDK untuk Browser.js.
Bangun server STS dan peroleh informasi otorisasi temporary dari klien
Bangun server STS.
Untuk membantu Anda membangun server STS, OSS menyediakan OSS SDK dalam bahasa-bahasa berikut:
PentingDemo di atas hanya sebagai referensi. Anda harus mengembangkan kode yang diperlukan untuk autentikasi dan fitur lainnya di lingkungan produksi.
Kirim permintaan ke server STS dari browser untuk memperoleh informasi otorisasi temporary STS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script> <script type="text/javascript"> // OSS.urllib adalah logika yang dienkapsulasi dalam SDK untuk mengirim permintaan. Anda dapat menggunakan library permintaan apa pun untuk mengirim permintaan ke your_sts_server. // Ganti your_sts_server dengan alamat IP atau nama domain server STS yang Anda siapkan pada Langkah 1. OSS.urllib.request( "your_sts_server", { method: "GET" }, (err, response) => { if (err) { return alert(err); } try { result = JSON.parse(response); } catch (e) { errmsg = "parse sts response info error: " + e.message; return alert(errmsg); } console.log(result); } ); </script> </body> </html>
Unggah objek
Anda dapat memanggil antarmuka multipartUpload untuk mengunggah file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="submit">Upload</button>
<input id="file" type="file" />
<!--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({
// Tentukan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur Region ke oss-cn-hangzhou.
region: "yourRegion",
authorizationV4: true,
// ID AccessKey dan Rahasia AccessKey temporary yang diperoleh dari STS.
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// Token keamanan yang diperoleh dari STS.
stsToken: "yourSecurityToken",
// Tentukan nama bucket, misalnya examplebucket.
bucket: "examplebucket",
});
const headers = {
// Tentukan perilaku cache halaman web saat objek diunduh.
"Cache-Control": "no-cache",
// Tentukan nama objek saat diunduh.
"Content-Disposition": "example.txt",
// Tentukan waktu kedaluwarsa dalam milidetik.
Expires: "1000",
// Tentukan kelas penyimpanan objek.
"x-oss-storage-class": "Standard",
// Tentukan tag untuk objek. Anda dapat menentukan beberapa tag.
"x-oss-tagging": "Tag1=1&Tag2=2",
// Tentukan apakah objek dengan nama yang sama dilarang ditimpa saat Anda menginisialisasi unggah multi-bagian. Nilai true berarti penimpaan dilarang.
"x-oss-forbid-overwrite": "true",
};
// Tentukan nama objek yang akan diunggah ke examplebucket, misalnya exampleobject.txt.
const name = "exampleobject.txt";
// Ambil DOM.
const submit = document.getElementById("submit");
const options = {
// Peroleh progres unggah multi-bagian, checkpoint, dan nilai kembali.
progress: (p, cpt, res) => {
console.log(p);
},
// Atur jumlah bagian yang diunggah secara konkuren.
parallel: 4,
// Atur ukuran bagian. Nilai default adalah 1 MB. Nilai minimum adalah 100 KB. Nilai maksimum adalah 5 GB. Ukuran bagian terakhir dapat lebih kecil dari 100 KB.
partSize: 1024 * 1024,
// headers,
// Metadata kustom. Anda dapat memperoleh metadata objek dengan memanggil operasi HeadObject.
meta: { year: 2020, people: "test" },
mime: "text/plain",
};
// Tambahkan pendengar ke tombol.
submit.addEventListener("click", async () => {
try {
const data = document.getElementById("file").files[0];
// Lakukan unggah multi-bagian.
const res = await client.multipartUpload(name, data, {
...options,
// Atur callback unggahan.
// Jika tidak melibatkan server callback, hapus pengaturan callback.
callback: {
// Atur alamat server untuk permintaan callback.
url: "http://examplebucket.aliyuncs.com:23450",
// Atur nilai Host di header permintaan callback. Ini adalah nilai Host yang dikonfigurasi di server Anda.
host: "yourHost",
/* eslint no-template-curly-in-string: [0] */
// Atur nilai badan permintaan saat callback dipicu.
body: "bucket=${bucket}&object=${object}&var1=${x:var1}",
// Atur Content-Type permintaan callback.
contentType: "application/x-www-form-urlencoded",
customValue: {
// Atur parameter kustom untuk permintaan callback.
var1: "value1",
var2: "value2",
},
},
});
console.log(res);
} catch (err) {
console.log(err);
}
});
</script>
</body>
</html>
Unduh objek
OSS menghasilkan signed URL sebagai tautan unduhan objek. Anda dapat menggunakan tautan tersebut untuk mengunduh objek.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--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({
// Atur region ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region ke oss-cn-hangzhou.
region: "yourRegion",
authorizationV4: true,
// Pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) yang diperoleh dari STS.
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// Token keamanan (SecurityToken) yang diperoleh dari STS.
stsToken: "yoursecurityToken",
// Tentukan nama bucket.
bucket: "examplebucket",
});
// Konfigurasikan header respons untuk mengunduh file secara otomatis dan mengatur nama filenya saat diakses melalui URL.
const filename = "examplefile.txt";
const response = {
"content-disposition": `attachment; filename=${encodeURIComponent(
filename
)}`,
};
// Tentukan path lengkap objek. Path lengkap tidak boleh mencakup nama bucket.
const url = client.signatureUrl("exampleobject.txt", { response });
console.log(url);
</script>
</body>
</html>Daftar objek
Kode contoh berikut memberikan contoh cara menampilkan daftar objek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>
<script>
const client = new OSS({
// Atur yourRegion ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur yourRegion ke oss-cn-hangzhou.
region: "yourRegion",
authorizationV4: true,
// Pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) yang diperoleh dari Layanan Token Keamanan (STS).
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// Token keamanan (SecurityToken) yang diperoleh dari STS.
stsToken: 'yourSecurityToken',
// Tentukan nama bucket. Misalnya, examplebucket.
bucket: "examplebucket",
});
async function list(dir) {
try {
// Secara default, maksimal 1.000 file dikembalikan.
let result = await client.list();
console.log(result);
// Lanjutkan memperoleh daftar file mulai dari file setelah file terakhir yang dibaca dalam operasi list sebelumnya.
if (result.isTruncated) {
result = await client.list({ marker: result.nextMarker });
}
// Tampilkan daftar file yang memiliki awalan 'ex'.
result = await client.list({
prefix: "ex",
});
console.log(result);
// Tampilkan daftar file yang memiliki awalan 'ex' dan namanya berada setelah 'example' dalam urutan alfabet.
result = await client.list({
prefix: "ex",
marker: "example",
});
console.log(result);
} catch (e) {
console.log(e);
}
}
list();
</script>
</body>
</html>