使用 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. JAVA通过JDBC连接Oracle数据库详解【转载】

    JAVA通过JDBC连接Oracle数据库详解 (2011-03-15 00:10:03) 转载▼http://blog.sina.com.cn/s/blog_61da86dd0100q27w.htm ...

  2. 集群（heartbeat）搭建

    HA 即(high available cluster)高可用集群,又称双机热备,保证关键性业务的不间断提供服务. 如:两台机器A和B,正常情况A提供服务,B待命闲置:一但A宕机或服务宕掉,自动切换至 ...

  3. yaml语言教程

    大家直接去看阮一峰的教程. http://www.ruanyifeng.com/blog/2016/07/yaml.html?f=tt 简介 基本语法规则: 大小写敏感 使用缩进表示层级关系 缩进时不 ...

  4. C++客户端通过gSOAP调用WebService

    webService三要素: SOAP(Simple Object Access Protocol).WSDL(WebServicesDescriptionLanguage).UDDI(Univers ...

  5. uva-10785-模拟水题

    模拟题: 1• The name has a predefined length N.名字长度N2• The vowel value and consonant value of the name m ...

  6. leetcode190

    public class Solution { public uint reverseBits(uint n) { var list = new List<uint>();//逆序的二进制 ...

  7. FDQuery sqlserver 临时表

    用FDQuery执行创建临时表,查不到临时表,用ADOQuery和BDEQuery均正常,比较发现用ADOQuery执行的时候只有SQL没有调用sql的系统存储过程sp_prepexec. 是fdqu ...

  8. 跟我学算法-PCA(降维)基本原理推导

    Pca首先 1.对数据进行去均值 2.构造一个基本的协方差矩阵1/m(X)*X^T 3对协方差矩阵进行变化,得到对角化矩阵,即对角化上有数值,其他位置上的数为0(协方差为0),即求特征值和特征向量的过 ...

  9. 【327】Python 中 PIL 实现图像缩放

    参考:Python 中使用PIL中的resize 进行缩放 参考:Python用Pillow(PIL)进行简单的图像操作(模糊.边缘增强.锐利.平滑等) 参考:廖雪峰 - Pillow 实现代码如下: ...

  10. 在mybatis中模糊查询有三种写法

    <select id="selectStudentsByName" resultType="Student"> <!--第一种-->  ...