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, // 需要上传到的Bucketbos_endpoint: "http://bj.bcebos.com", // BOS服务器的地址accept: _this.fileType, // 文件类型bos_multipart_min_size:2,//超过这个值之后，采用分片上传的策略，如果想让所有的文件都采用分片上传，把这个值设置为0即可chunk_size:"1mb", // 分片上传的时候每个分片的大小（如果没有切换到分片上传的策略，这个值没有意义）uptoken_url: "/apis/baidubceVOD/getBceGeneratedSTS", // 用来进行服务端签名的URL，需要支持JSONPmax_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()

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

js使用BOS Uploader上传视频到百度云相关推荐

微信小程序如何上传音视频到百度云Bos cloud BCE
在做了一系列调查之后,目前为止暂未发现有相关的文章,在此简单记录一下解决此问题的步骤,造福来人. 本人的解决方案参考了百度云BOS官方文档,地址如下: https://cloud.baidu.com/ ...
批量上传视频到阿里云
批量上传视频到阿里云这段时间项目里有一个上传视频到阿里云的功能是我来负责写的,之前一直没有写过这种功能,感觉很难的亚子,但是后来仔细研究了一遍发现也没想象中那么难,最后经过不懈的努力也算是搞出来了哈 ...
上传视频到阿里云服务器
######上传视频到阿里云服务器工具类 1.maven坐标 <dependency><groupId>com.aliyun</groupId><artifa ...
前端上传视频至阿里云
1.开通阿里云服务,获取userId 官方文档地址:https://help.aliyun.com/document_detail/52204.html?spm=a2c4g.11186623.6.91 ...
vue + elementUI upload组件，前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用 import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun ...
Springboot上传视频到阿里云（视频点播）和aliyun-java-sdk-vod依赖报红问题
一.pom.xm中导入依赖 <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-ja ...
vue上传视频到华为云obs
公司做的后台,需要上传视频,但是视频会非常的大,动不动就到了1G.后端接口上传肯定是非常慢的,公司决定使用华为云直传. 我看到有两种方法一个是npm下载,第二个就是github下载文件引入,今天讲的是 ...
vue 直接上传视频到阿里云oss
1.安装oss npm install ali-oss --save 2.在src下的util文件创建utils.js工具类 /*** 时间日期格式化* @param format* @returns ...
easyswoole上传视频到阿里云（继承上面easyswoole视频上传大小限制取消代码）
参考网址 https://help.aliyun.com/document_detail/61388.html 在easuswoole根目录下面的ini文件夹下,新建aliyun.ini access ...

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

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

2、引入相关js文件

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

3、使用

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

4、未使用的方法

5、对外提供的接口

1、start（）

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

2、stop()

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

js使用BOS Uploader上传视频到百度云相关推荐

最新文章

热门文章

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

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

2、引入相关js文件

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

3、使用

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

4、未使用的方法

5、对外提供的接口

1、start（）

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

2、stop()

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

js使用BOS Uploader上传视频到百度云相关推荐

最新文章

热门文章

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