百度开放云 BOS Uploader

bce-bos-uploader 是基于 bce-sdk-js 开发的一个 ui 组件，易用性更好。
DEMO地址是：http://leeight.github.io/bce-bos-uploader/

支持的浏览器

http://caniuse.com/#feat=fileapi

IE6,7,8,9, IE10+, Firefox/Chrome/Opera 最新版

如何使用

bower install bce-bos-uploader

写一个最简单的页面：

<!doctype html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>bce-bos-uploader simple demo</title>

    <script src="./bower_components/jquery/dist/jquery.min.js"></script>

    <script src="./bower_components/bce-bos-uploader/bce-bos-uploader.bundle.js"></script>

  </head>

  <body>

    <input type="file" id="file"

           data-multi_selection="true"

           data-bos_bucket="baidubce"

           data-uptoken_url="http://127.0.0.1:1337/ack" />

    <script>new baidubce.bos.Uploader('#file');</script>

  </body>

</html>

关于 uptoken_url 应该如何实现，以及如何设置过 Bucket 的 CORS 属性，在以前的文档里面有说明，这里就不赘述了。

当然，也可以去掉 html tag 里面的 data 属性，直接用JS的方式来初始化：

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

<script>

var uploader = new baidubce.bos.Uploader({

  browse_button: '#file',

  bos_bucket: 'baidubce',

  multi_selection: true,

  uptoken_url: 'http://127.0.0.1:1337/ack'

});

</script>

支持的配置参数

名称 是否必填 默认值 说明
bos_bucket Y 无 需要上传到的Bucket
uptoken_url Y 无 用来进行服务端签名的URL，需要支持JSONP
browse_button Y 无 需要初始化的<input type="file"/>
bos_endpoint N http://bos.bj.baidubce.com BOS服务器的地址
bos_credentials N {} 如果没有设置uptoken_url的话，必须有这个配置才可以工作
multi_selection N false 是否可以选择多个文件
max_retries N 0 如果上传文件失败之后，支持的重试次数。默认不重试
auto_start N false 选择文件之后，是否自动上传
max_file_size N 100M 可以选择的最大文件，超过这个值之后，会被忽略掉
bos_multipart_min_size N 10M 超过这个值之后，采用分片上传的策略。如果想让所有的文件都采用分片上传，把这个值设置为0即可
chunk_size N 4M 分片上传的时候，每个分片的大小（如果没有切换到分片上传的策略，这个值没意义）

支持的事件

在初始化 uploader 的时候，可以通过设置 init 来传递一些 回掉函数，然后 uploader 在合适的时机，会调用这些回掉函数，然后传递必要的参数。例如：

var uploader = new baidubce.bos.Uploader({

  init: {

    PostInit: function () {

      // uploader 初始化完毕之后，调用这个函数

    },

    FileFiltered: function (_, file) {

      // 如果文件因为某些原因被过滤了，调用这个函数

    },

    FilesAdded: function (_, files) {

      // 当文件被加入到队列里面，调用这个函数

    },

    BeforeUpload: function (_, file) {

      // 当某个文件开始上传的时候，调用这个函数

    },

    UploadProgress: function (_, file, progress, event) {

      // 文件的上传进度

    },

    Key: function(_, file) {

      // 可以设置需要保存的文件路径

    },

    FileUploaded: function (_, file, info) {

      // 文件上传成功之后，调用这个函数

    },

    UploadPartProgress: function (_, file, progress, event) {

      // 分片上传的时候，单个分片的上传进度

    },

    Error: function (_, error, file) {

      // 如果上传的过程中出错了，调用这个函数

    },

    UploadComplete: function () {

      // 队列里面的文件上传结束了，调用这个函数

    }

  }

});

需要注意的时候，所以回掉函数里面的一个参数，暂时都是 null，因此上面的例子中用 _ 代替，后续可能会升级

对外提供的接口

start()

当 auto_start 设置为 false 的时候，需要手工调用 start 来开启上传的工作。

stop()

调用 stop 之后，会终止对文件队列的处理。需要注意的是，不是立即停止上传，而是等到当前的文件处理结束（成功/失败）之后，才会停下来。

百度开放云 BOS Uploader的更多相关文章

  1. 百度网盘，前几天刚从百度云改名过来，百度云这个名字给之前的百度开放云（同步盘用户比较小众）good

    作者:黑郁金香链接:http://www.zhihu.com/question/51803053/answer/127562835来源:知乎著作权归作者所有,转载请联系作者获得授权. 在8月网盘大面积 ...

  2. NB-IOT模块 M5310-A接入百度开放云IOT Hub MQTT

    目录 1.登陆百度开放云,在产品服务中选择IOT HUB 2 2.选择 创建计费套餐,目前1百万条/每月是免费的 2 3.点击管理控制台进入项目列表 4 4. 点击创建项目,项目类型选择数据型 4 5 ...

  3. 使用git自动将子工程发布到百度开放云上

    我的项目中包含多个子工程,如web工程.python工程等.我在项目的根目录下建立了git管理,因此如果使用git push只能把整个项目推送上去,但我只想推送web工程目录.因此,编写了cmd脚本如 ...

  4. 百度开放云java+tomcat部署web项目-小皇帝詹姆斯

    加入部署 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  5. 使用百度云 BOS 和 C# SDK 开发数据存储

    Ø  简介 本文主要介绍如何使用百度云的 C# SDK 操作 BOS(Baidu Object Storage/百度对象存储),以及常见问题和解决办法.本文将以以下几点展开学习: 1.   基本介绍 ...

  6. 运用百度开放平台接口根据ip地址获取位置

    使用百度开放平台接口根据ip地址获取位置 今天无意间发现在百度开放平台接口,就把一段代码拿了下来,有需要的可以试试看:http://opendata.baidu.com/api.php?query=5 ...

  7. 百度开放平台连接MySQL数据库

    在百度开放平台创建了MySQL数据库后只知道数据库名称,可以通过下面的方法进行连接: public function connect(){ $_server = getenv('HTTP_BAE_EN ...

  8. 【云计算】IBM开放云架构

    IBM 的开放云架构 通过改变业务和社会运行的方式,云计算开启了丰富的创新途径.开发人员现在正将记录系统与参与性系统相结合,一种新的基于云的应用程序风格正在出现:交互系统.这些应用程序要可持续发展,云 ...

  9. 利用百度智能云结合Python体验图像识别(转载来自qylruirui)

    https://blog.csdn.net/qylruirui/article/details/94992917 利用百度智能云结合Python体验图像识别只要注册了百度账号就可以轻松体验百度智能云中 ...

随机推荐

  1. Python：Scrap爬虫过程中遇到的各种错误

    1.KeyError: 'Spider not found: BDS' 原因:settings.py中缺少了几项与spider名字配置相关的项: BOT_NAME = 'BDS' SPIDER_MOD ...

  2. anaconda及jupyter notebook的了解及使用方法(1)

    今日内容 anaconda软件使用 jupyter notebook基本使用及快捷键 numpy anaconda软件使用 1.进入anaconda主页点击jupyter启动即可 呼起一个jupyte ...

  3. C#comboBox取消SelectedIndexChanged事件

    问题: comboBox在加载数据源时会默认引发SelectedIndexChanged事件. 解决: 在comboBox加载数据源时添加如下代码 cmbGroupName.SelectedIndex ...

  4. LeetCode-071-简化路径

    简化路径 题目描述:给你一个字符串 path ,表示指向某一文件或目录的 Unix 风格 绝对路径 (以 '/' 开头),请你将其转化为更加简洁的规范路径. 在 Unix 风格的文件系统中,一个点(. ...

  5. 微信小程序+laravel 7+ Redis +短信宝 实现手机号验证码登录

    以下代码可以进行优化和封装:这里我实现功能为主,就不封装啦.小伙伴可以自己试着封装一下. 1:书写登录表单 <view class="container"> <v ...

  6. LGP2726题解

    当初 mark 这道题还是因为看到是黑,感觉比较水,然后它现在掉紫了. 不过这题题解居然满了,写一篇给自己看吧. 首先我们有一个思路,就是割掉一条边,然后分别求两颗树的重心. 等等,这好像是CSP原题 ...

  7. CF375D题解

    昨天教练布置的莫队作业,然后一看我老早就用 DSU on tree 切了,来补题解( 题意 静态树询问子树中,同一种元素的数量不小于 \(k\) 的元素有多少种. 莫队做法 容易观察到子树在 \(\r ...

  8. 网易互娱23届实习笔试_3x3锯齿数独

    一.输入: 输入一个3x3数独,字符'.'代表空输入三个宫的域,每个宫包括三个位置,[0,0]表示0行0列 二.输出要求: 1.每个宫里最终123各出现一次, 2.数独中的行列里不出现重复字符: 输出 ...

  9. 朴素版Dijkstra

    我们之前介绍的求最短路问题,我们通常会考虑到用BFS算法计算,这里我们将这样对于求最短路问题用不同的算法进行分类: 思路介绍:Dijkstra算法的思路究竟是怎么样的,我们这里先介绍一下朴素版Dijk ...

  10. Java案例——字符串中的数据排序

    需求:有一个字符串"9 1 2 7 4 6 3 8 5 0",请编写程序实现从小到大数据排序 分析:最重要的部分是如何将字符串中的数据取出来 1.定义一个字符串为"9 1 ...