百度开放云 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 以后,会住手对文件行列的处置惩罚。须要注重的是,不是马上住手上传,而是比及当前的文件处置惩罚完毕(胜利/失利)以后,才会停下来。