Topik ini menjelaskan cara memanggil operasi PutObject untuk mengunggah file, data BLOB, atau buffer ke Object Storage Service (OSS). Fungsi progres tidak tersedia untuk unggah simple.
Prasyarat
OSS SDK untuk Browser.js telah diinstal. Untuk informasi selengkapnya, lihat Instalasi.
Catatan Penggunaan
Jika Anda 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 untuk bucket tersebut agar dapat diakses dari browser. Untuk informasi selengkapnya, lihat Instalasi.
OSS SDK untuk Browser.js umumnya digunakan di browser. Untuk mencegah eksposur pasangan AccessKey Anda, kami menyarankan penggunaan 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 mencakup ID AccessKey dan Rahasia AccessKey. Untuk informasi selengkapnya tentang cara memperoleh kredensial akses temporary, lihat Gunakan STS untuk otorisasi akses temporary.
Izin
Secara default, Akun Alibaba Cloud memiliki izin penuh. Pengguna RAM atau Peran RAM di bawah Akun Alibaba Cloud tidak memiliki izin apa pun secara default. Akun Alibaba Cloud atau administrator akun harus memberikan izin operasi melalui Kebijakan RAM atau Kebijakan bucket.
API | Action | Definisi |
PutObject |
| Mengunggah objek. |
| Saat mengunggah objek, jika Anda menentukan tag objek melalui | |
| Saat mengunggah objek, jika metadata objek berisi | |
|
Kode Contoh
BLOB (Binary Large Object) adalah objek biner besar.
Kode berikut menunjukkan contoh cara mengunggah data ke objek bernama exampleobject.txt dalam direktori exampledir di bucket examplebucket:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<input id="file" type="file" />
<button id="upload">Upload an Object</button>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
<script>
const client = new OSS({
// Tentukan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region menjadi oss-cn-hangzhou.
region: "yourRegion",
authorizationV4: true,
// Tentukan pasangan AccessKey temporary yang diperoleh dari STS. Pasangan AccessKey terdiri atas ID AccessKey dan Rahasia AccessKey.
accessKeyId: "yourAccessKeyId",
accessKeySecret: "yourAccessKeySecret",
// Tentukan token keamanan yang Anda peroleh dari STS.
stsToken: "yourSecurityToken",
// Tentukan nama bucket.
bucket: "examplebucket",
});
// Pilih file lokal dari daftar drop-down. Contoh: <input type="file" id="file" />.
let data;
// Buat dan tentukan data Blob.
//const data = new Blob(['Hello OSS']);
// Buat buffer OSS dan tentukan konten buffer OSS tersebut.
//const data = new OSS.Buffer(['Hello OSS']);
const upload = document.getElementById("upload");
async function putObject(data) {
try {
// Tentukan path lengkap objek. Jangan sertakan nama bucket dalam path lengkap tersebut.
// Tentukan nama objek atau path lengkap objek untuk mengunggah data ke bucket saat ini atau direktori tertentu dalam bucket. Misalnya, atur nama objek menjadi exampleobject.txt atau path objek menjadi exampledir/exampleobject.txt.
// Anda dapat mengatur data sebagai file, data Blob, atau buffer OSS.
const options = {
meta: { temp: "demo" },
mime: "json",
headers: { "Content-Type": "text/plain" },
};
const result = await client.put("examplefile.txt", data, options);
console.log(result);
} catch (e) {
console.log(e);
}
}
upload.addEventListener("click", () => {
const data = file.files[0];
putObject(data);
});
</script>
</body>
</html>
FAQ
Apakah saya bisa mendapatkan progres unggah untuk unggah simple?
Tidak. Progres unggah hanya tersedia untuk unggah multi-bagian (Browser.js SDK) dan unggah yang dapat dilanjutkan (Browser.js SDK).
Referensi
Untuk kode contoh lengkap unggah simple, lihat contoh GitHub.
Untuk informasi selengkapnya tentang operasi API unggah simple, lihat PutObject.