使用 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. 华为交换机STP 根ID优先级设置

    http://m.blog.csdn.net/flyfish5/article/details/50224537 STP(Spanning Tree Protocol)生成树协议. 冗余链路 当前的交 ...

  2. brave-zipkin的日志源码分析

    其实在zipkin的日志里面作为发送端日志两个,sr,ss,这个日志是servlet产生的:接收端日志是四个,分别是cr,sr,ss,cs:cr和cs分别是上游的日志的信息:ss和sr是接收端输出的日 ...

  3. node.js + express 初体验【hello world】

    [node.js]  一个神奇的XX 呵呵 :) 不知道怎么形容他才好! [express] 是node.js 开发web应用程序的框架 开发环境:XP 大家共同进步吧 :) 一:前期准备: 1:下载 ...

  4. mysql中去重 distinct 用法

    在使用MySQL时,有时需要查询出某个字段不重复的记录,这时可以使用mysql提供的distinct这个关键字来过滤重复的记录,但是实际中我们往往用distinct来返回不重复字段的条数(count( ...

  5. spring RestTemplate用法详解

    spring RestTemplate用法详解 spring 3.2.3 框架参考有说明 21.9 Accessing RESTful services on the Client

  6. 生成Excel

    生成Excel 需要引用MyXls.SL2.dll的类库: 下载地址:http://sourceforge.net/projects/myxls/ 命名空间using org.in2bits.MyXl ...

  7. zabbix使用之打造邮件报警

    zabbix使用之打造邮件报警 前言: 报警信息很重要,它能使我们最快的知道故障内容,以便于及时处理问题.zabbix如果没配置报警功能,则完全不能体现zabbix的优势了 配置详情如下: 1.编写发 ...

  8. c++经典排序算法全集(转)

    C++排序算法全集 排序算法是一种基本并且常用的算法.由于实际工作中处理的数量巨大,所以排序算法对算法本身的速度要求很高. 一.简单排序算法 由于程序比较简单,所以没有加什么注释.所有的程序都给出了完 ...

  9. JSON.parse() 方法解析一个JSON字符串

    JSON.parse() 方法解析一个JSON字符串,构造由字符串描述的JavaScript值或对象.可以提供可选的reviver函数以在返回之前对所得到的对象执行变换. 语法EDIT JSON.pa ...

  10. docker 网络配置路由转发

    建好flannel 网络之后 iptables -L -n 查看 要全是accept iptables -P FORWARD ACCEPT 开启路由转发 修改/etc/sysctl.conf文件,添加 ...