OSS brower js SDK-阿里云开发者社区

开发者社区> 阿里云支持与服务> 正文

OSS brower js SDK

简介: 浅谈 今天带来的是 OSS brower js SDK 的安装过程和使用的 demo 测试用例。 环境准备 OSS brower js SDK 是基于 node js 框架上的服务端程序,服务端启动以后,提供客户端的访问地址。

浅谈

今天带来的是 OSS brower js SDK 的安装过程和使用的 demo 测试用例。

环境准备

OSS brower js SDK 是基于 node js 框架上的服务端程序,服务端启动以后,提供客户端的访问地址。

  • 准备 node js 安装,最好在 9.x.x 以上版本,我当前的测试版本是 v10.9.0
  • 测试浏览器环境 ( IE>=10,主流版本的 Chrome/Firefox/Safari,主流版本的 Android/iOS/WindowsPhone )

开始安装

下载源码 git 库

npm 开始安装

  • cd ali-oss ,执行 npm install
  • cd example ,执行 npm install

tips :因为部分浏览器不支持 promise,需要引入 promise 兼容库。 例如:IE10 和 IE11 需要引入 promise-polyfill 。

修改配置文件

  • 1、OSS brower 自带集成了 STS 生成的功能,其实就是在本地启动了一个小型的 web server ,这样用可以通过 STS 的安全方式上传、下载 OSS。如果要用这个集成的 STS 生成方式,需要修改:
#vim ali-oss/example/server/config.js
module.exports = {
  AccessKeyId: "子账号 accesskey",
  AccessKeySecret: "子账号 accesskeysecret",
  RoleArn: "角色 Arn",
  // 建议 Token 失效时间为 1 小时
  TokenExpireTime: '3600',
  PolicyFile: 'policy/all_policy.txt'
};
  • 2、 如果用户不想用这个集成的 STS 生成器,可以自己单独写个生成 STS 代码。那么上面的 1 步忽略,直接执行以下操作。 vim ali-oss/example/server/config.js,将 bucket 和 region 替换成自己的信息。
    1
  • 3、 如果用户自己单独写了一个 sts 的程序,需要将 main,js 中依赖的 sts 地址换成自己的访问链接;
    3
  • 4、 在 OSS 上配置跨域头,避免跨域访问到 OSS 是出现 deny 403 的情况。如果客户端访问是 http://192.168.1.102/brower/testindex.html ,在 OSS 跨域来源上 IP 也要加入,最方便的做法是配置为 *;
    4

启动

cd ali-oss/example 执行 npm run start
如果用户想要用 https 的方式上传,在 OSSClient 初始化时加上 secure:true 就是 https 传输了。

const client = new OSS({
        region,
        accessKeyId: creds.AccessKeyId,
        accessKeySecret: creds.AccessKeySecret,
        stsToken: creds.SecurityToken,
        bucket,
        secure:true
      });

下图就是启动后的效果
5

使用遇到问题

上传回调如何添加

const uploadFile = function uploadFile(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: 500 * 1024,
          timeout:60000,
      meta: {
          year: 2017,
          people: 'test',
      },
callback: {

//这里是添加上传回调的位置
  url: 'https://uploadtest.xueersi.com/v2/sync',
  /* host: 'oss-cn-shenzhen.aliyuncs.com', */
  /* eslint no-template-curly-in-string: [0] */
  body: 'bucket=${bucket}&object=${object}&var1=${x:var1}',
  contentType: 'application/x-www-form-urlencoded',
  customValue: {
    var1: 'value1',
    var2: 'value2',
  },
},

如何使用 https 传输

const client = new OSS({
        region,
        accessKeyId: creds.AccessKeyId,
        accessKeySecret: creds.AccessKeySecret,
        stsToken: creds.SecurityToken,
        bucket,
        secret: true
      })

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

分享阿里云支持与服务团队最佳实践、经典案例与故障排查。

官方博客
文档