使用 aliyun-oss-sdk-4.4.4.min.js

方式一 客户端授权

https://help.aliyun.com/document_detail/32069.html

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

注意这里暴露了accessKeySecret，实际应用中在客户端不可采用这种方式。

<body>

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

  <input type="file" id="file" />

  <script type="text/javascript">

    var client = new OSS.Wrapper({

      region: '<oss region>',

      accessKeyId: '<Your accessKeyId>',

      accessKeySecret: '<Your accessKeySecret>',

      bucket: '<Your bucket name>'

    });

    document.getElementById('file').addEventListener('change', function (e) {

      var file = e.target.files[0];

      var storeAs = 'upload-file';

      console.log(file.name + ' => ' + storeAs);

      client.multipartUpload(storeAs, file).then(function (result) {

        console.log(result);

      }).catch(function (err) {

        console.log(err);

      });

    });

  </script>

</body>

方式二 采用服务端授权

https://github.com/rockuw/oss-in-browser

<script>
var appServer = 'http://localhost:3000';//STS授权服务端

var bucket = 'js-sdk-bucket-sts';

var region = 'oss-cn-hangzhou';

var urllib = OSS.urllib;

var OSS = OSS.Wrapper;

var STS = OSS.STS;

var applyTokenDo = function (func) {

  var url = appServer;

  return urllib.request(url, {

    method: 'GET'

  }).then(function (result) {

    var creds = JSON.parse(result.data);

    var client = new OSS({

      region: region,

      accessKeyId: creds.AccessKeyId,

      accessKeySecret: creds.AccessKeySecret,

      stsToken: creds.SecurityToken,

      bucket: bucket

    });

    return func(client);

  });

};

var progress = function (p) {

  return function (done) {

    var bar = document.getElementById('progress-bar');

    bar.style.width = Math.floor(p * 100) + '%';

    bar.innerHTML = Math.floor(p * 100) + '%';

    done();

  }

};

var uploadFile = function (client) {

  var file = document.getElementById('file').files[0];

  var key = document.getElementById('object-key-file').value.trim() || 'object';

  console.log(file.name + ' => ' + key);

  return client.multipartUpload(key, file, {

    progress: progress

  }).then(function (res) {

    console.log('upload success: %j', res);

    return listFiles(client);

  });

};

window.onload = function () {

  document.getElementById('file-button').onclick = function () {

    applyTokenDo(uploadFile);

  }

};
</script>

NodeJS搭建的STS授权服务器

https://github.com/rockuw/node-sts-app-server

阿里云OSS-js分片上传的更多相关文章

  1. JAVA整合阿里云OSS实现文件上传功能

    引入maven <dependency> <groupId>org.apache.commons</groupId> <artifactId>commo ...

  2. 阿里云OSS Multipart Upload上传实例

    原来是用的PutObject()方式上传文件的,但是当文件比较大的时候,总是报一个对方强制关闭连接导致上传失败.PS:公司的网比较渣,10MB的文件都传不上去,搜了下,说使用Multipart Upl ...

  3. 阿里云 oss 小文件上传进度显示

    对阿里云OSS上传小文件时的进度,想过两个方法:一是.通过多线程监測Inputstream剩余的字节数来计算,可是由于Inputstream在两个线程中共用,假设上传线程将Inputstream关闭, ...

  4. 阿里云oss，简单上传

    描述:oss比较方便,省去了自己搭建文件服务器的时间,价格比较便宜,下面是java基于oss的简单上传代码 a.添加maven依赖 <dependency> <groupId> ...

  5. node.js分片上传文件

    前端 : <html> <head> <title>分片上传文件</title> </head> <body> <div ...

  6. js分片上传大文件，前端代码

    首先导入jQuery.form.js文件,下面src是相对于改js文件位置, <script type="text/JavaScript" src="jquery/ ...

  7. 阿里云 轻量应用服务器 上传一个HTML文件或者jsp文件 通过外网IP访问

    我选择的是 宝塔Linux,现在就说一下如何往服务器里面传文件然后通过外网IP访问 1.打开宝塔Linux面板登录,安装tomcat,安装好后如图 2.点击tomcat有个文件标识处 3.出现如图 4 ...

  8. 阿里云ECS服务器无法上传文件的解决方案

    1.安装软件启动FTP服务 yum install vsftpd # 安装service vsftpd start # 启动服务chkconfig vsftpd on # 开机启动 2.防火墙ipta ...

  9. 阿里云oss视频上传不能在线播放,js,javascript,在线播放器,插件

    网页视频播放插件 发现阿里云oss储存,上传了视频不能在线播放. 解决方法:使用插件播放即可解决. <html> <head> <meta charset="u ...

  10. Hexo一键部署到阿里云OSS并设置浏览器缓存

    自建博客地址:https://bytelife.net,欢迎访问! 本文为博客自动同步文章,为了更好的阅读体验,建议您移步至我的博客 本文作者: Jeffrey 本文链接: https://bytel ...

随机推荐

  1. 使用PL/SQL Developer连接远程数据

    本机不安装Oracle客户端,使用PL/SQL Developer连接远程数据 1.先到Oracle网站下载Instant Client : http://www.oracle.com/technet ...

  2. Centos7配置 SNMP服务

    本文转载至:http://blog.51cto.com/5001660/2097212   一.安装yum源安装SNMP软件包 1.更新yum源: yum clean all yum makecach ...

  3. FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题

    FastAdmin 中 的 layer js 使用 r.js 压缩出现的问题 https://fly.layui.com/jie/2120/ layer是requirejs压缩文件r.js里面的关键字 ...

  4. centos7 安装配置rsyslog + LogAnalyzer + mysql

    https://www.cnblogs.com/mchina/p/linux-centos-rsyslog-loganalyzer-mysql-log-server.html 安装LNMP 一键安装包 ...

  5. MYSQL中写SQL语句，取到表中按ID降序排列（最新纪录排在第一行）

    'select * from bugdata where id>0 order by id desc'

  6. linux用命令行看网线物理连接状态

    inux下有两个命令可以看网线状态: ethtool 和 mii-tool 竟然还都要用,由于网卡所支持的协议不同,哪个网卡能用哪个命令是不一定的. [root@rhel demo]# ethtool ...

  7. rabbitMQ应用，laravel生产广播消息，springboot消费消息

    最近做一个新需求,用户发布了动态,前台需要查询,为了用户读取信息响应速度更快(MySQL很难实现或者说实现起来很慢),所以在用户动态发布成功后,利用消息机制异步构建 redis缓存 和 elastic ...

  8. js基础篇string&&array（应YX同学面试复习要求 - -）

    js中的数据类型一共有五个基本数据类型,分别是undefined,null,boolean,number,string. js中的Object类型中包括两大类型:Function类型和array类型. ...

  9. php的静态变量的实现

    1.静态变量的结构 php脚本编译之后会生成执行opcode组成的opcode_array,执行每个zend_op_array都会生成一个单独的zend_execute_data结构. php的局部变 ...

  10. 关于mysql 间隙锁

    前段时间系统老是出现update死锁,很是纠结.经过排查发现是间隙锁!间隙锁是innodb中行锁的一种, 但是这种锁锁住的却不止一行数据,他锁住的是多行,是一个数据范围.间隙锁的主要作用是为了防止出现 ...