百度开放云 BOS Uploader

2024年1月27日 391次阅读 来源: leeight

百度开放云 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_bucketY无须要上传到的Bucket
uptoken_urlY无用来举行服务端署名的URL，须要支撑JSONP
browse_buttonY无须要初始化的<input type="file"/>
bos_endpointNhttp://bos.bj.baidubce.comBOS服务器的地点
bos_credentialsN{}假如没有设置uptoken_url的话，必须有这个设置才能够事情
multi_selectionNfalse是不是能够挑选多个文件
max_retriesN0假如上传文件失利以后，支撑的重试次数。默许不重试
auto_startNfalse挑选文件以后，是不是自动上传
max_file_sizeN100M能够挑选的最大文件，凌驾这个值以后，会被疏忽掉
bos_multipart_min_sizeN10M凌驾这个值以后，采纳分片上传的战略。假如想让一切的文件都采纳分片上传，把这个值设置为0即可
chunk_sizeN4M分片上传的时刻，每一个分片的大小（假如没有切换到分片上传的战略，这个值没意义）

支撑的事宜

在初始化 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 以后，会住手对文件行列的处置惩罚。须要注重的是，不是马上住手上传，而是比及当前的文件处置惩罚完毕（胜利/失利）以后，才会停下来。

    原文作者：leeight
    原文地址: https://segmentfault.com/a/1190000004613187
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞