Object Storage Service瀏覽器的應用 - Object Storage Service

本文介紹瀏覽器的應用。

前提條件

已為Bucket配置跨域規則。具體操作，請參見準備工作。
已搭建STS Server並從用戶端擷取臨時授權資訊。具體操作，請參見搭建STS Server並從用戶端擷取臨時授權資訊。

支援的瀏覽器

Browser.js SDK支援以下版本的瀏覽器：

IE（>=10）和Edge
重要
- 在IE中使用Browser.js SDK之前需要引入promise庫。
- Browser.js SDK是通過File API進行檔案操作，在一些較低版本的瀏覽器中運行會出現問題。建議使用第三方外掛程式，通過對OSS API的調用，實現上傳檔案、下載檔案等操作。具體樣本，請參見Web端直傳實踐。
主流版本的Chrome/Firefox/Safari
主流版本的Android/iOS/WindowsPhone系統預設瀏覽器

通過瀏覽器上傳檔案

以下範例程式碼用於通過瀏覽器上傳檔案。範例程式碼中使用了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">
      <!-- // 定義選擇框，用於選擇需要上傳的檔案。 -->
      <label>Select file</label>
      <input type="file" id="file" />
    </div>
    <div class="form-group">
      <!-- // 定義文字框，用於指定上傳到OSS檔案的名稱。 -->
      <label>Store as</label>
      <input type="text" class="form-control" id="object-key-file" value="" />
    </div>
    <div class="form-group">
      <!-- // 定義上傳按鈕，用於上傳檔案。 -->
      <input
        type="button"
        class="btn btn-primary"
        id="file-button"
        value="Upload"
      />
    </div>
    <div class="form-group">
      <!-- // 定義進度條，用於顯示上傳的進度。 -->
      <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>
    <!--匯入sdk檔案-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      // 填寫您的授權伺服器地址，例如http://127.0.0.1:8000/sts。
      const appServer = "yourStsServer";
      // 填寫Bucket名稱，例如examplebucket。
      const bucket = "examplebucket";
      // 填寫Bucket所在地區。以華東1（杭州）為例，region填寫為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);
            // 通過臨時訪問憑證建立OSS Client。
            const client = new OSS({
             // yourRegion填寫Bucket所在地區。以華東1（杭州）為例，yourRegion填寫為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}`);
        // 通過multipartUpload上傳選中的檔案，並通過progress參數設定進度條。
        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>

Object Storage Service：Browser.js瀏覽器的應用

前提條件

支援的瀏覽器

通過瀏覽器上傳檔案

相關文檔