百度开放云 BOS Uploader

时间 2019-11-09

标签百度开放 bos uploader 繁體版

原文原文链接

百度开放云 BOS Uploader

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

支持的浏览器

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

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

如何使用

bower install bce-bos-uploader

写一个最简单的页面：github

<!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 属性，在之前的文档里面有说明，这里就不赘述了。api

固然，也能够去掉 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 来开启上传的工做。ui

stop()

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