本文介绍浏览器的应用。

支持的浏览器

Browser.js SDK支持以下版本的浏览器:

  • IE(>=10)和Edge
    注意 在IE中使用Browser.js SDK之前需要引入promise库。
  • 主流版本的Chrome/Firefox/Safari
  • 主流版本的Android/iOS/WindowsPhone系统默认浏览器

通过浏览器上传文件

SDK是通过File API进行文件操作,在一些较低版本的浏览器中运行会出现问题。建议使用第三方插件,通过对OSS API的调用,实现上传文件、下载文件等操作。具体示例,请参见Web端直传实践

通过浏览器上传文件的步骤如下:

  1. 设置跨域资源共享规则。
    1. 登录OSS管理控制台
    2. 单击Bucket列表,然后单击目标Bucket名称。
    3. 在左侧导航栏,选择权限管理 > 跨域设置,然后在跨域设置区域,单击设置
    4. 单击创建规则,在创建跨域规则面板按以下说明配置各项参数,其他参数保留默认配置。
      参数 示例
      来源 设置为*
      允许Methods 选中GETPOSTPUTDELETE以及HEAD
      允许Headers 设置为 *
      暴露Headers 设置为ETag
    5. 单击确定
  2. 创建网页。
    以下代码用于创建网页。其中class="xxx"表示使用Bootstrap样式。
    <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="object" />
    </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>                           
  3. 添加样式。
    添加样式时用到了Bootstrap。您需要在网页的<head>标签中加入样式:
    <head>
      <title>OSS in Browser</title>
      <link rel="stylesheet" href="bootstrap.min.css" />
    </head>                            
  4. 添加样式。
    此时网页仍然是静态的。您需要为该网页添加JavaScript脚本,以完成上传文件操作。
    1. <head>标签中引入SDK的开发包。
      <head>
        <title>OSS in Browser</title>
        <link rel="stylesheet" href="bootstrap.min.css" />
        <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.17.1.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
      </head>                            
    2. app.js中执行以下代码。
      // 填写您的授权服务器地址。
      const appServer = 'http://localhost:3000';
      // 填写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({
            region: region,
            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);
        }
      };                            

相关文档

关于浏览器应用的完整示例代码,请参见GitHub示例