全部产品
对象存储 OSS

浏览器应用

更新时间:2017-06-28 14:10:31   分享:   

浏览器支持

  • IE(>=10)和Edge
  • 主流版本的Chrome/Firefox/Safari
  • 主流版本的Android/iOS/WindowsPhone

注意:

  • 在IE中使用需要在引入SDK之前引入promise库:

    1. <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    2. <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

设置

Bucket设置

从浏览器中直接访问OSS,需要对Bucket的CORS属性进行设置,设置方式如下所示:

  • 来源 设置成 *
  • Method 设置成 GET, POST, PUT, DELETE, HEAD
  • Allowed Header 设置成 *
  • Expose Header 设置成 ETag

注意:请将该条CORS规则设置成所有CORS规则的第一条。

STS设置

为了不在网页中暴露AccessKeyId和AccessKeySecret,我们采用STS进行临时授权。授权服务器由用户维护,只有认证的用户才能向授权服务器申请临时权限。参考OSS使用STS设置子账号和STS的Policy,参考Node.js STS AppServer搭建自己的授权服务器。

例子

下面我们将使用SDK开发一个网页应用,包含4个功能:

  • 上传文件
  • 上传文本
  • 列出文件
  • 下载文件

完整的代码可以在oss-in-browser找到。最终的效果如下:

下面的介绍将以“上传文件”为例:

1. 创建网页

对于“上传文件”的功能,在网页上需要4个控件:

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

下面的代码创建了这4个控件,其中class="xxx"是为了使用Bootstrap样式,可以先忽略。

  1. <div class="form-group">
  2. <label>Select file</label>
  3. <input type="file" id="file" />
  4. </div>
  5. <div class="form-group">
  6. <label>Store as</label>
  7. <input type="text" class="form-control" id="object-key-file" value="object" />
  8. </div>
  9. <div class="form-group">
  10. <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
  11. </div>
  12. <div class="form-group">
  13. <div class="progress">
  14. <div id="progress-bar"
  15. class="progress-bar"
  16. role="progressbar"
  17. aria-valuenow="0"
  18. aria-valuemin="0"
  19. aria-valuemax="100" style="min-width: 2em;">
  20. 0%
  21. </div>
  22. </div>
  23. </div>

2. 添加样式

接下来为网页添加一些样式,让它更好看一些,这里我们用到了Bootstrap。在网页的<head>标签中加入样式:

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

其中bootstrap.min.css可以在bootstrap的官网下载。

3. 添加脚本

到目前为止,网页是静态的,点击上面的按钮也不会有反应。接下来的重点是为它添加一些JavaScript脚本,让它能够上传文件/下载文件/列出文件。

首先在<head>标签中引入SDK的开发包:

  1. <head>
  2. <title>OSS in Browser</title>
  3. <link rel="stylesheet" href="bootstrap.min.css" />
  4. <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
  5. <script type="text/javascript" src="app.js"></script>
  6. </head>

其中app.js是真正执行上传文件的代码,内容如下:

  1. var appServer = 'http://localhost:3000';
  2. var bucket = 'js-sdk-bucket-sts';
  3. var region = 'oss-cn-hangzhou';
  4. var urllib = OSS.urllib;
  5. var OSS = OSS.Wrapper;
  6. var STS = OSS.STS;
  7. var applyTokenDo = function (func) {
  8. var url = appServer;
  9. return urllib.request(url, {
  10. method: 'GET'
  11. }).then(function (result) {
  12. var creds = JSON.parse(result.data);
  13. var client = new OSS({
  14. region: region,
  15. accessKeyId: creds.AccessKeyId,
  16. accessKeySecret: creds.AccessKeySecret,
  17. stsToken: creds.SecurityToken,
  18. bucket: bucket
  19. });
  20. return func(client);
  21. });
  22. };
  23. var progress = function (p) {
  24. return function (done) {
  25. var bar = document.getElementById('progress-bar');
  26. bar.style.width = Math.floor(p * 100) + '%';
  27. bar.innerHTML = Math.floor(p * 100) + '%';
  28. done();
  29. }
  30. };
  31. var uploadFile = function (client) {
  32. var file = document.getElementById('file').files[0];
  33. var key = document.getElementById('object-key-file').value.trim() || 'object';
  34. console.log(file.name + ' => ' + key);
  35. return client.multipartUpload(key, file, {
  36. progress: progress
  37. }).then(function (res) {
  38. console.log('upload success: %j', res);
  39. return listFiles(client);
  40. });
  41. };
  42. window.onload = function () {
  43. document.getElementById('file-button').onclick = function () {
  44. applyTokenDo(uploadFile);
  45. }
  46. };

上传一个文件分为以下步骤:

  1. 向授权服务器申请临时权限。其中授权服务器是网站开发者构建的用于向终端用户提供临时授权的服务。开发者可以在授权时为不同的用户提供不同的权限(参考OSS使用STS)。授权服务器可以参考这个例子,为了简便,例子中授权服务器直接向用户返回临时凭证。
  2. 使用临时密钥创建OSS Client。
  3. 通过multipartUpload上传选中的文件,并通过progress参数设置进度条。

4. 其他功能

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

本文导读目录
本文导读目录
以上内容是否对您有帮助?