淘宝开放平台

本文主要介绍浏览器的应用。

目前支持的浏览器如下：

IE(>=10)和Edge
主流版本的Chrome/Firefox/Safari
主流版本的Android/iOS/WindowsPhone系统默认浏览器

注意在IE中使用需要在引入SDK之前引入promise库。

低版本浏览器

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

相关设置
- Bucket设置
  从浏览器中直接访问OSS，需要对Bucket的CORS属性进行设置。
  - 将来源设置成 *
  - 将Method设置成 GET, POST, PUT, DELETE, HEAD
  - 将Allowed Header设置成 *
  - 将Expose Header设置成 etag
  注意请将该条CORS规则设置成所有CORS规则的第一条。
- STS设置
  为了不在网页中暴露AccessKeyId和AccessKeySecret，我们采用STS进行临时授权。授权服务器由用户维护，只有认证的用户才能向授权服务器申请临时权限。设置子账号和STS的Policy，请参考Node.js STS AppServer搭建自己的授权服务器。

示例

使用SDK开发一个网页应用，包含上传文件、上传文本、列举文件和下载文件。完整的示例代码可参考oss-in-browser。

以上传文件为例：

创建网页

一个文件选择框，用于选择需要上传的文件。
一个文本框，用于输入上传到OSS Object的名字。
一个按钮，用于开始上传。
一个进度条，用于显示上传的进度。

下面的代码创建了这4个控件，其中class="xxx"是为了使用Bootstrap样式。

<div class="form-group">
  <label>Select file</label>
  <input type="file" id="file" />
</div>
<div class="form-group">
  <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>

添加样式
添加样式时用到了Bootstrap。在网页的<head>标签中加入样式：
```
<head>
  <title>OSS in Browser</title>
  <link rel="stylesheet" href="bootstrap.min.css" />
</head>
```
其中bootstrap.min.css可以在Bootstrap的官网下载。

添加脚本

此时网页仍然是静态的。您需要为该网页添加JavaScript脚本，从而实现上传文件、下载文件和列举文件等操作。

首先在<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-x.x.x.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>

其中app.js为执行上传文件的代码，内容如下：

const appServer = 'http://localhost:3000';
const bucket = 'js-sdk-bucket-sts';
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);
    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}`);

  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，GitHub示例中授权服务器直接向用户返回临时凭证。
使用临时密钥创建OSS Client。
通过multipartUpload上传选中的文件，并通过progress参数设置进度条。

上传文本内容、获取文件列表、下载文件等功能请参考代码示例OSS in Browser。

对象存储 OSS

浏览器应用

低版本浏览器

FAQ