对象存储OSS浏览器的应用 - 对象存储 OSS

本文介绍浏览器的应用。

前提条件

已为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>

对象存储 OSS：Browser.js浏览器的应用

前提条件

支持的浏览器

通过浏览器上传文件

相关文档