全部产品
存储与CDN 数据库 安全 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网
对象存储 OSS

快速开始-浏览器

更新时间:2017-07-12 18:16:44

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

注意:云账号AccessKey拥有所有API访问权限,建议遵循阿里云安全最佳实践,在客户端不要使用会泄露配置的ak,所以请创建并使用STS方式(临时账号权限)给客户端授权。

STS场景说明:临时账号权限(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="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

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

搭建STS Server 并从客户端获取临时授权信息

  1. 为账号开通STS服务,如果已开通可以跳过,开通STS请参见STS开通说明

  2. 借助STS的SDK或API应用专属的STS签名服务。为了方便大家快速理解,提供了三个语言的版本Demo程序供参考:

  3. 在前端(浏览器)中向搭建的STS服务发起请求,获取STS临时授权信息。

    1. <script type="text/javascript">
    2. OSS.urllib.request("http://your_sts_server/",
    3. {method: 'GET'},
    4. function (err, response) {
    5. if (err) {
    6. return alert(err);
    7. }
    8. try {
    9. result = JSON.parse(response);
    10. } catch (e) {
    11. errmsg = 'parse sts response info error: ' + e.message;
    12. return alert(errmsg);
    13. }
    14. // console.log(result)
    15. })
    16. </script>

查看文件列表

  1. <script type="text/javascript">
  2. OSS.urllib.request("http://your_sts_server/",
  3. {method: 'GET'},
  4. function (err, response) {
  5. if (err) {
  6. return alert(err);
  7. }
  8. try {
  9. result = JSON.parse(response);
  10. } catch (e) {
  11. return alert('parse sts response info error: ' + e.message);
  12. }
  13. var client = new OSS.Wrapper({
  14. accessKeyId: result.AccessKeyId,
  15. accessKeySecret: result.AccessKeySecret,
  16. stsToken: result.SecurityToken,
  17. endpoint: '<oss endpoint>',
  18. bucket: '<Your bucket name>'
  19. });
  20. client.list({
  21. 'max-keys': 10
  22. }).then(function (result) {
  23. console.log(result);
  24. }).catch(function (err) {
  25. console.log(err);
  26. });
  27. });
  28. </script>

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

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

注意:浏览器是不受信任的环境,如果把AccessKeyId和AccessKeySecret直接保存在浏览器端,存在极高的风险。建议只在测试时使用明文设置,业务应用中请使用 STS鉴权模式自签名模式 ,详细说明请参考访问控制移动端直传

上传文件

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

  1. <body>
  2. <input type="file" id="file" />
  3. <script type="text/javascript">
  4. document.getElementById('file').addEventListener('change', function (e) {
  5. var file = e.target.files[0];
  6. var storeAs = 'upload-file';
  7. console.log(file.name + ' => ' + storeAs);
  8. OSS.urllib.request("http://your_sts_server/",
  9. {method: 'GET'},
  10. function (err, response) {
  11. if (err) {
  12. return alert(err);
  13. }
  14. try {
  15. result = JSON.parse(response);
  16. } catch (e) {
  17. return alert('parse sts response info error: ' + e.message);
  18. }
  19. var client = new OSS.Wrapper({
  20. accessKeyId: result.AccessKeyId,
  21. accessKeySecret: result.AccessKeySecret,
  22. stsToken: result.SecurityToken,
  23. endpoint: '<oss endpoint>',
  24. bucket: '<Your bucket name>'
  25. });
  26. client.multipartUpload(storeAs, file).then(function (result) {
  27. console.log(result);
  28. }).catch(function (err) {
  29. console.log(err);
  30. });
  31. });
  32. });
  33. </script>
  34. </body>

下载文件

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

  1. <body>
  2. <input type="button" id="download" value="Download" />
  3. <script type="text/javascript">
  4. document.getElementById('download').addEventListener('click', function (e) {
  5. var objectKey = 'test/download_file';
  6. var saveAs = 'download_file';
  7. console.log(objectKey + ' => ' + saveAs);
  8. OSS.urllib.request("http://your_sts_server/",
  9. {method: 'GET'},
  10. function (err, response) {
  11. if (err) {
  12. return alert(err);
  13. }
  14. try {
  15. result = JSON.parse(response);
  16. } catch (e) {
  17. return alert('parse sts response info error: ' + e.message);
  18. }
  19. var client = new OSS.Wrapper({
  20. accessKeyId: result.AccessKeyId,
  21. accessKeySecret: result.AccessKeySecret,
  22. stsToken: result.SecurityToken,
  23. endpoint: '<oss endpoint>',
  24. bucket: '<Your bucket name>'
  25. });
  26. var result = client.signatureUrl(objectKey, {
  27. expires: 3600,
  28. response: {
  29. 'content-disposition': 'attachment; filename="' + saveAs + '"'
  30. }
  31. });
  32. console.log(result);
  33. window.location = result;
  34. });
  35. });
  36. </script>
  37. </body>

download_with_sts

本文导读目录