百度开放云 BOS Uploader
百度开放云 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的更多相关文章
- 百度网盘,前几天刚从百度云改名过来,百度云这个名字给之前的百度开放云(同步盘用户比较小众)good
作者:黑郁金香链接:http://www.zhihu.com/question/51803053/answer/127562835来源:知乎著作权归作者所有,转载请联系作者获得授权. 在8月网盘大面积 ...
- NB-IOT模块 M5310-A接入百度开放云IOT Hub MQTT
目录 1.登陆百度开放云,在产品服务中选择IOT HUB 2 2.选择 创建计费套餐,目前1百万条/每月是免费的 2 3.点击管理控制台进入项目列表 4 4. 点击创建项目,项目类型选择数据型 4 5 ...
- 使用git自动将子工程发布到百度开放云上
我的项目中包含多个子工程,如web工程.python工程等.我在项目的根目录下建立了git管理,因此如果使用git push只能把整个项目推送上去,但我只想推送web工程目录.因此,编写了cmd脚本如 ...
- 百度开放云java+tomcat部署web项目-小皇帝詹姆斯
加入部署 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
- 使用百度云 BOS 和 C# SDK 开发数据存储
Ø 简介 本文主要介绍如何使用百度云的 C# SDK 操作 BOS(Baidu Object Storage/百度对象存储),以及常见问题和解决办法.本文将以以下几点展开学习: 1. 基本介绍 ...
- 运用百度开放平台接口根据ip地址获取位置
使用百度开放平台接口根据ip地址获取位置 今天无意间发现在百度开放平台接口,就把一段代码拿了下来,有需要的可以试试看:http://opendata.baidu.com/api.php?query=5 ...
- 百度开放平台连接MySQL数据库
在百度开放平台创建了MySQL数据库后只知道数据库名称,可以通过下面的方法进行连接: public function connect(){ $_server = getenv('HTTP_BAE_EN ...
- 【云计算】IBM开放云架构
IBM 的开放云架构 通过改变业务和社会运行的方式,云计算开启了丰富的创新途径.开发人员现在正将记录系统与参与性系统相结合,一种新的基于云的应用程序风格正在出现:交互系统.这些应用程序要可持续发展,云 ...
- 利用百度智能云结合Python体验图像识别(转载来自qylruirui)
https://blog.csdn.net/qylruirui/article/details/94992917 利用百度智能云结合Python体验图像识别只要注册了百度账号就可以轻松体验百度智能云中 ...
随机推荐
- anaconda及jupyter notebook的使用之numpy模块的用法(2)
今日内容概要 numpy模块结束 ndarray创建 numpy内置方法 索引与切片(花式索引.布尔索引) 常用函数 统计方法 随机数 numpy的内置方法 import numpy as np 1. ...
- tp 实现定时任务
这里我是用tp6进行测试的:适合做本地项目 博客参考:: https://www.thinkphp.cn/topic/64455.html 1:composer 安装workman插件 compos ...
- tp5 多文件上传
路由: Route::post('imgs','task/task/uploads'); 控制器代码: // 多文件上传 public function uploads() { //接受参数 $dat ...
- Python文件读写--错误一
在学习python的文件读写操作的时候,我遇到了一点麻烦事,觉得可以记录下来,先上代码吧. with open('test.txt') as file: file.write('test') prin ...
- php 魔术方法,未声明属性,数组的注释 - 帮助ide跳转,提高可读性
本人使用vscode编辑器.其他编辑器未测试. 经过1: 用laravel开发了一段时间,最麻烦的一点就是许多时候编辑器无法智能提示和辅助跳转. 有一款ide-helper的插件,感觉不是很好用,经常 ...
- HCNP Routing&Switching之组播技术-组播分发
前文我们了解了组播技术中的igmp-snooping相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15860484.html:今天我们来聊一聊组播技术 ...
- 最大连续子序列和(DP)
DP入门_最大连续子序列(最大连续和) Description 有一条崎岖的山路,该山路被分成了n段(1<=n<=100,000),每段山路的驾驶体验不同.作为老司机的刘师傅给每段山路打分 ...
- CF375E Red and Black Tree(线性规划)
CF375E Red and Black Tree(线性规划) Luogu 题解时间 很明显有一个略显复杂的 $ n^3 $ dp,但不在今天讨论范围内. 考虑一些更简单的方法. 设有 $ m $ 个 ...
- 【编程教室】PONG - 100行代码写一个弹球游戏
大家好,欢迎来到 Crossin的编程教室 ! 今天跟大家讲一讲:如何做游戏 游戏的主题是弹球游戏<PONG>,它是史上第一款街机游戏.因此选它作为我这个游戏开发系列的第一期主题. 游戏引 ...
- Spring 和 SpringBoot 有什么不同?
Spring 框架提供多种特性使得 web 应用开发变得更简便,包括依赖注入.数据绑定.切面编程.数据存取等等. 随着时间推移,Spring 生态变得越来越复杂了,并且应用程序所必须的配置文件也令人觉 ...