使用 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. yarn workspaces基本试用

    初始化项目 yarn init -y 添加workspaces 支持 修改package.json { "name": "second", "vers ...

  2. Java 的Integer、int与new Integer到底怎么回事？

    先做一些总结,询问了些经验比较多的师傅,在这里表示感谢,然后自己总结下,今天的收获分享给大家: 1. int 和Integer在进行比较的时候,Integer会进行拆箱,转为int值与int进行比较. ...

  3. (转)性能分析之-- JAVA Thread Dump 分析综述

    原文链接:http://blog.csdn.net/rachel_luo/article/details/8920596 最近在做性能测试,需要对线程堆栈进行分析,在网上收集了一些资料,学习完后,将相 ...

  4. visualvm 和jdk 对应版本下载地址列表

    http://visualvm.java.net/releases.html VisualVM Corresponding Java VisualVM VisualVM 1.3.7Released: ...

  5. thinkpad t420安装debian需要注意的细节

    关闭双显卡,使用集成显卡,32位可以用独显跑起来,但是64位的wheezy只能兼容集成显卡,不知道为啥,否则会在某些usb插入/或者拔出来以后,重启提示 failed to execute /lib/ ...

  6. 《Linux内核精髓：精通Linux内核必会的75个绝技》一HACK #10　Fair Group Scheduling

    HACK #10 Fair Group Scheduling 本节介绍Cgroup之一.管理CPU资源的Fair Group Scheduling.Fair Group SchedulingFair ...

  7. javaweb消息中间件——rabbitmq入门

    概念:RabbitMQ是一款开源的消息中间件系统,由erlang开发,是AMQP的实现. 架构图大概如上. broker是消息队列的服务器,比如在linux上,我们安装的rabbitmq就是一个bro ...

  8. ArrayList实现

    数组实现父类:AbstractList接口:List,RandomAccess,Cloneable,Serializable字段://默认容量private static final int DEFA ...

  9. Python实践练习：正则表达式查找

    题目 编写一个程序,打开文件夹中所有的.txt 文件,查找匹配用户提供的正则表达式的所有行.结果应该打印到屏幕上. 代码 #!/usr/bin/python # -*- coding: UTF-8 - ...

  10. 26.OGNL与ValueStack(VS)-N语法top语法

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html N语法[0]:<s:property value="[0]& ...