zoukankan      html  css  js  c++  java
  • 百度开放云 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 之后,会终止对文件队列的处理。需要注意的是,不是立即停止上传,而是等到当前的文件处理结束(成功/失败)之后,才会停下来。

  • 相关阅读:
    解决PKIX:unable to find valid certification path to requested target 的问题
    Linux 上的常用文件传输方式介绍与比较
    用VNC远程图形化连接Linux桌面的配置方法
    红帽中出现”This system is not registered with RHN”的解决方案
    linux安装时出现your cpu does not support long mode的解决方法
    CentOS SSH配置
    es6扩展运算符及rest运算符总结
    es6解构赋值总结
    tortoisegit安装、clon、推送
    es6环境搭建
  • 原文地址:https://www.cnblogs.com/10manongit/p/12956880.html
Copyright © 2011-2022 走看看