阅读746 返回首页    go 阿里云 go 技术社区[云栖]

快速开始-浏览器__JavaScript-SDK_SDK 参考_对象存储 OSS-阿里云

下面介绍如何在浏览器中使用OSS JavaScript SDK来访问OSS服务，包括上传/下载文件和查看文件列表。

注意：为了简化，下面的介绍直接在网页中使用AccessKeyId和AccessKeySecret，这是不安全的做法。实际使用中应使用STS进行临时授权访问。

更多有关浏览器的使用请参考：浏览器应用。

Bucket设置

从浏览器中直接访问OSS需要开通Bucket的CORS设置：

  • 将allowed origins设置成’*’
  • 将allowed methods设置成’PUT, GET, POST, DELETE, HEAD’
  • 将allowed headers设置成’*’
  • 将expose headers设置成’ETag’

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

使用SDK

目前浏览器中不能直接进行Bucket相关的操作（例如list buckets, get/set bucket logging/referer/website/cors）。但是可以进行Object相关的操作（例如上传/下载文件，查看文件列表等）。

包含SDK

首先在html文件的<head>中包含如下标签：

  1. <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

通过new OSS.Wapper()来创建client，OSS.Wrapper提供了异步的接口，类似于callback的方式，在.then()中处理返回的结果，在.catch()中处理错误。

查看文件列表

  1. <script type="text/javascript">
  2.   var client = new OSS.Wrapper({
  3.     region: '<oss region>',
  4.     accessKeyId: '<Your accessKeyId>',
  5.     accessKeySecret: '<Your accessKeySecret>',
  6.     bucket: '<Your bucket name>'
  7.   });
  9.   client.list({
  10.     'max-keys': 10
  11.   }).then(function (result) {
  12.     console.log(result);
  13.   }).catch(function (err) {
  14.     console.log(err);
  15.   });
  16. </script>

其中region参数是指您申请OSS服务时的区域，例如’oss-cn-hangzhou’。完整的区域列表可以在OSS服务节点查看。

在浏览器中打开html文件，然后打开Chrome的“开发者控制台”，就可以看到list文件的结果了。

上传文件

下面使用multipartUpload接口来上传文件：

  1. <body>
  2.   <input type="file" id="file" />
  3.   <script type="text/javascript">
  4.     var client = new OSS.Wrapper({
  5.       region: '<oss region>',
  6.       accessKeyId: '<Your accessKeyId>',
  7.       accessKeySecret: '<Your accessKeySecret>',
  8.       bucket: '<Your bucket name>'
  9.     });
  11.     document.getElementById('file').addEventListener('change', function (e) {
  12.       var file = e.target.files[0];
  13.       var storeAs = 'upload-file';
  14.       console.log(file.name + ' => ' + storeAs);
  16.       client.multipartUpload(storeAs, file).then(function (result) {
  17.         console.log(result);
  18.       }).catch(function (err) {
  19.         console.log(err);
  20.       });
  21.     });
  22.   </script>
  23. </body>

下载文件

在浏览器中不能直接操作文件，因此采用签名URL的方式来生成文件的下载链接，用户只需要点击链接就可以下载文件。

  1. <body>
  2.   <input type="button" id="download" value="Download" />
  3.   <script type="text/javascript">
  4.     var client = new OSS.Wrapper({
  5.       region: '<oss region>',
  6.       accessKeyId: '<Your accessKeyId>',
  7.       accessKeySecret: '<Your accessKeySecret>',
  8.       bucket: '<Your bucket name>'
  9.     });
  11.     document.getElementById('download').addEventListener('click', function (e) {
  12.       var objectKey = 'upload-file';
  13.       var saveAs = 'download';
  14.       console.log(objectKey + ' => ' + saveAs);
  16.       var result = client.signatureUrl(objectKey, {
  17.         expires: 3600,
  18.         response: {
  19.           'content-disposition': 'attachment; filename="' + saveAs + '"'
  20.         }
  21.       });
  22.       console.log(result);
  24.       window.location = result;
  25.     });
  26.   </script>
  27. </body>

最后更新：2016-11-23 16:04:10

  上一篇：go 异常__.NET-SDK_SDK 参考_对象存储 OSS-阿里云
  下一篇：go 快速开始-NodeJS__JavaScript-SDK_SDK 参考_对象存储 OSS-阿里云