使用 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. Hive之 hive与hadoop的联系

    Hive与Hadoop调用图 解析: 1.提交sql 交给驱动2.驱动编译:解析相关的字段表信息3.去metastore查询相关的信息 返回字段表信息4.编译返回信息 发给驱动5.驱动发送一个执行计划 ...

  2. C#细说多线程（上）

    本文主要从线程的基础用法,CLR线程池当中工作者线程与I/O线程的开发,并行操作PLINQ等多个方面介绍多线程的开发.其中委托的BeginInvoke方法以及回调函数最为常用.而 I/O线程可能容易遭 ...

  3. Python——内置函数（待完善）

    内置函数(68个),分为六大类 思维导图: 1. 迭代器/生成器相关(3个) (1)range for i in range(10): #0-9 print(i) for i in range(1,1 ...

  4. 数据库比较工具DBCompareTool for Oracle 0.2.5发布

    迁移数据库sql to oracle http://www.oracle.com/technetwork/cn/database/migration/connect-sqlserver-1945229 ...

  5. 安装memcached服务 和 php 安装memcache扩展

    这是所有的命令,至于哪个命令是干嘛的自己悟去吧  ,顺便穿插一些知识点 安装libevent cd /home/ wget  http://www.monkey.org/~provos/libeven ...

  6. 智能家居入门DIY——【四、组合】

    前面几篇介绍了一些传感器和代码,这篇介绍一下把它们组合起来.之所以单独列出这部分,原因在于组合更多功能的时候发现使用软串口库驱动ESP8266时由于内存过小导致发送失败甚至整个系统无法工作的情况.所以 ...

  7. 黄聪：中国大陆的所有IP段，中国电信所有IP段、中国铁通所有IP段、中国网通所有IP段。

    中国大陆的所有IP段,中国电信所有IP段.中国铁通所有IP段.中国网通所有IP段. 中国大陆的所有IP段: 47.153.128.0 47.154.255.25558.14.0.0 58.25.255 ...

  8. jQuery的删除的三种方法remove(),detach(),empty()

    remove()方法是从DOM中删除所有匹配的元素,包括匹配元素的子元素.但是他会有一个返回值, 返回值是一个指向已被删除的节点的引用,所以说,remove删除的元素,还可以再回收利用. var $l ...

  9. Raspberry Pi 安装FTP（Pure-FTP）

    Raspbian版本: 安装: 因为使用的是默认的pi用户,所以下面的命令都带着sudo. 安装Pure-FTP sudo apt-get install pure-ftpd 2. 创建用户组ftpg ...

  10. findbug、p3c、checkstyle、sonar安装使用

    idea插件安装方式: Preferences—>Plugins—>查找插件—>Install Preferences—>Plugins—>Install plug fr ...