Aplikasi browser untuk Object Storage Service (OSS) - Object Storage Service

Topik ini menjelaskan kasus penggunaan browser.

Prasyarat

Konfigurasikan aturan lintas domain untuk bucket. Untuk informasi selengkapnya, lihat Persiapan.
Buat server Security Token Service (STS) dan peroleh informasi otorisasi temporary dari client. Untuk informasi selengkapnya, lihat Buat server STS dan peroleh informasi otorisasi temporary dari client.

Peramban yang didukung

Browser.js SDK mendukung versi browser berikut:

IE 10 atau versi lebih baru dan Edge
Penting
- Impor library promise sebelum menggunakan Browser.js SDK di IE.
- Browser.js SDK menggunakan File API untuk operasi file, yang dapat menyebabkan masalah pada versi browser yang lebih lama. Anda dapat menggunakan plug-in pihak ketiga untuk memanggil API OSS guna melakukan operasi seperti mengunggah dan mengunduh file. Contohnya, lihat Praktik unggah langsung berbasis web.
Versi utama Chrome, Firefox, dan Safari
Browser bawaan pada versi utama Android, iOS, dan Windows Phone

Unggah file dari browser

Kode contoh berikut menunjukkan cara mengunggah file dari browser. Kode contoh ini menggunakan gaya Bootstrap.

<!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">
      <!-- // Pilih file yang akan diunggah. -->
      <label>Select file</label>
      <input type="file" id="file" />
    </div>
    <div class="form-group">
      <!-- // Tentukan nama file yang akan diunggah ke OSS. -->
      <label>Store as</label>
      <input type="text" class="form-control" id="object-key-file" value="" />
    </div>
    <div class="form-group">
      <!-- // Unggah file tersebut. -->
      <input
        type="button"
        class="btn btn-primary"
        id="file-button"
        value="Upload"
      />
    </div>
    <div class="form-group">
      <!-- // Tampilkan progres pengunggahan. -->
      <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>
    <!--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">
      // Tentukan URL server otorisasi Anda. Misalnya, http://127.0.0.1:8000/sts.
      const appServer = "yourStsServer";
      // Tentukan nama bucket. Misalnya, examplebucket.
      const bucket = "examplebucket";
      // Tentukan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region menjadi 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);
            // Buat klien OSS menggunakan kredensial akses temporary.
            const client = new OSS({
             // Atur yourRegion ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur yourRegion menjadi 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}`);
        // Gunakan multipartUpload untuk mengunggah file yang dipilih dan gunakan parameter progress untuk mengatur bilah progres.
        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>

Referensi

Untuk kode contoh lengkap aplikasi browser, lihat contoh GitHub.