js使用BOS Uploader上传视频到百度云

1、先nmp install bce-bos-uploader在项目中安装BOS Uploader

2、引入相关js文件

在需要使用的vue页面中引入js相关文件

import baidubce from "../../../../../static/bceupload/bower_components/bce-bos-uploader/bce-bos-uploader.bundle.js";

3、使用

在vue页面的mounted钩子函数中初始化

			this.uploader = new baidubce.bos.Uploader({
				browse_button:'#file', // 需要初始化的标签
				multi_selection: false,// 是否可以选择多个文件
				bos_bucket: G_BUCKET, // 需要上传到的Bucket
				bos_endpoint: "http://bj.bcebos.com", // BOS服务器的地址
				accept: _this.fileType, // 文件类型
				bos_multipart_min_size:2,//超过这个值之后，采用分片上传的策略，如果想让所有的文件都采用分片上传，把这个值设置为0即可
				chunk_size:"1mb", // 分片上传的时候每个分片的大小（如果没有切换到分片上传的策略，这个值没有意义）
				uptoken_url: "/apis/baidubceVOD/getBceGeneratedSTS", // 用来进行服务端签名的URL，需要支持JSONP
				max_file_size: '50Gb',// 可以选择的最大文件，超过这个值之后，会被忽略掉
				init: { 
					// 当文件被加入到队列里面，调用这个函数
					FilesAdded: function(_, files) {
						_this.isDasabled = true;
						let ext = getFileExtension(files[files.length-1]).toLowerCase();
						if(ext && _this.fileType.indexOf(ext) == -1) {
							 _this.$Message.info('仅支持'+_this.fileType+"格式的文件");
							 _this.uploader.remove(files[files.length-1].uuid);
						} else {
							_this.fileUuid = files[files.length-1].uuid;
							let time = new Date().format('yyyy-MM-dd h:m:s');
							_this.uploading = true;
							if(time > _this.tokenTime) {
								getASk(_this.uploader, _this);
							} else {
								_this.uploader.start()
							}
						}
					},
					// 设置需要保存的文件路径
					Key: function(_, file) {
						return getKey(file);
					},
					// 分片上传的时候，单个分片的上传进度
					UploadProgress: function(_, file, progress, event) { //上传进度
						_this.$set(_this, "percent", parseInt(progress * 100));
					},
					// 文件上传成功后，调用这个函数
					FileUploaded: function(_, file, info) {
						_this.isDasabled = false;
						//文件上传成功后
						let enclosureList = {};
						_this.fileUuid = '';
						file.__done(file, info, _this,enclosureList);
						if(file.__mediaId){
							enclosureList.baiduCloud = file.__mediaId;
							_this.__mediaId = file.__mediaId;
						}
						enclosureList.enclosureName = file.name;
						enclosureList.enclosureSize = file.size;
						enclosureList.belongType = "1",
						enclosureList.enclosureState = "0";
						_this.formValidate.enclosureList.push(enclosureList);
						_this.formValidate.catalogName = file.name;
						_this.uploading = false;
						_this.$set(_this, "percent",0);
						_this.$refs.file.value="";
					},
				}
			});

4、未使用的方法

	PostInit: function () {
      // uploader 初始化完毕之后，调用这个函数
    },
    FileFiltered: function (_, file) {
      // 如果文件因为某些原因被过滤了，调用这个函数
    },
    BeforeUpload: function (_, file) {
      // 当某个文件开始上传的时候，调用这个函数
    },
    UploadPartProgress: function (_, file, progress, event) {
      // 分片上传的时候，单个分片的上传进度
    },
    Error: function (_, error, file) {
      // 如果上传的过程中出错了，调用这个函数
    },
    UploadComplete: function () {
      // 队列里面的文件上传结束了，调用这个函数
    }

** 需要注意的时候，所以回掉函数里面的一个参数，暂时都是 null，因此上面的例子中用 _ 代替，后续可能会升级 **

5、对外提供的接口

1、start（）

当auto_start设置为false时 需要手动的调用start()来开启

2、stop()

终止文件队列的处理，但并不是立即终止，而是等当前文件处理结束后才会终止