百度開放雲 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 () {
      // 隊列裏面的文件上傳結束了，調用這個函數
    }
  }
});