对象存储OSS浏览器的应用_对象存储-阿里云帮助中心

本文介绍浏览器的应用。

支持的浏览器

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

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

通过浏览器上传文件

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

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

设置跨域资源共享规则。
1. 登录OSS管理控制台。
2. 单击Bucket列表，然后单击目标Bucket名称。
3. 在左侧导航栏，选择数据安全 > 跨域设置。
4. 单击创建规则，在创建跨域规则面板按以下说明配置各项参数，其他参数保留默认配置。
  参数示例
  来源设置为*。
  允许Methods 选中GET、POST、PUT、DELETE以及HEAD。
  允许Headers 设置为 *。
  暴露Headers 设置为ETag。
5. 单击确定。

参数	示例
来源	设置为`*`。
允许Methods	选中GET、POST、PUT、DELETE以及HEAD。
允许Headers	设置为 `*`。
暴露Headers	设置为`ETag`。

创建网页。

以下代码用于创建网页。其中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>

添加样式。

添加样式时用到了Bootstrap。您需要在网页的<head>标签中加入样式：

<head>
  <title>OSS in Browser</title>
  <link rel="stylesheet" href="bootstrap.min.css" />
</head>

添加样式。

此时网页仍然是静态的。您需要为该网页添加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-6.17.1.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>

在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);
  }
};

Browser.js浏览器的应用

支持的浏览器

通过浏览器上传文件

相关文档