html二进制上传视频,踩坑Webuploader视频上传

背景

因为我司业务关系，需实现兼容IE8+浏览器的视频上传功能，且支持多选断点上传。故借助Baidu WebFE(FEX)团队开发的webuploader文件上传插件实现此业务功能。javascript

文件上传的通常联调步骤

1.js端认证(主要是判断视频是否已存在，若已存在，返回视频已上传的文件大小，只须要判断一次)：html

第一步：计算视频文件的md5，视频文件越大、计算md5的时间越久html5

第二步：获取视频文件的总大小java

第三步：把视频名称、文件总大小、视频文件的md5字符串传输到tokenUrlweb

2.返回json的参数：json

success:验证是否成功promise

fileMd5：视频文件md5浏览器

start:已上传的大小(没上传过的返回0，已上传部分则返回对应已上传的大小值，例如：30000字节，已上传20000字节，则返回20000)bash

3.验证经过后，js端上传(视频文件大的，分割的次数也越多)网络

第一步：根据视频文件的总大小、设定每次分割视频流的大小

第二步：把视频文件的md5字符串、

视频已上传的大小值start(第一次是根据JS端认证的填写，第二次是根据上一次返回的填写)、分割的视频流传输到upUrl

返回json的参数：

success:验证上传该段视频流是否成功

start:已上传的大小

插件配置解析

HTML部分

首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。

{#list queuedList as item}

x

{/list}

+

点击上传视频

每次最多上传{queuedLimit}个，单个视频不超过4G

已选择

个，

复制代码

初始化webuploader

uploader = WebUploader.create({

resize: false, // 不压缩image

swf: base_URL + 'jslib/WebUploader/Uploader.swf', // swf文件路径

method: "post",

sendAsBinary : true,//文件上传二进制流

fileNumLimit: 10,//验证文件总数量, 超出则不容许加入队列

fileSingleSizeLimit: 4*1024*1024*1024,//验证单个文件大小是否超出限制, 超出则不容许加入队列

server: upload_URL,// 文件接收服务端

pick: {

id: '#filePicker', //这个id是你要点击上传文件按钮的外层div的id

multiple : true //是否能够批量上传，true能够同时选择多个文件

},

chunked: true,//是否要分片处理大文件上传

threads: true, //上传并发数

chunkSize:3*1024*1024, //分片上传，每片2M，默认是5M

prepareNextFile: true,//上传当前分片时预处理下一分片

//auto: false //选择文件后是否自动上传

chunkRetry : 1, //若是某个分片因为网络问题出错，容许自动重传次数

duplicate: false, //重复选择

// runtimeOrder: 'html5, flash'

accept: {

extensions: 'avi,wmv,rm,rmvb,mov,mkv,flv,mp4,f4v,3gp,ts,wma,wav,aac',

mimeTypes: '.avi,.wmv,.rm,.rmvb,.mov,.mkv,.flv,.mp4,.f4v,.3gp,.ts,.wma,.wav,.aac'

}//视频文件后缀

});

复制代码

监听分块上传过程当中的三个时间点

WebUploader.Uploader.register({

"before-send-file":"beforeSendFile",

"before-send":"beforeSend",

"after-send-file":"afterSendFile",

},{

//时间点1：全部分块进行上传以前调用此函数

beforeSendFile:function(file){

var deferred = WebUploader.Deferred();

//一、计算文件的惟一标记，用于断点续传

(new WebUploader.Uploader()).md5File(file,0,2*1024*1024)

.progress(function(percentage){

})

.then(function(val){

fileMd5=val;

//获取文件信息后进入下一步

deferred.resolve();

});

return deferred.promise();

},

//时间点2：若是有分块上传，则每一个分块上传以前调用此函数

beforeSend:function(block){

var deferred = WebUploader.Deferred();

if(videoAdd[block.file.id] > block.start){

// 分块存在，跳过

deferred.reject();

}else{

// 分块不存在或不完整，从新发送该分块内容

this.owner.options.formData={

start: block.start,//设置视频上传的start点

fileMd5: videoMd5[block.file.id]//设置视频上传的惟一标识MD5

}

deferred.resolve();

}

return deferred.promise();

},

//时间点3：全部分块上传成功后调用此函数

afterSendFile:function(file, response){

//分块上传成功，执行成功回调

successHandler(file, response, fileArr);

}

});

复制代码

显示用户选择

监听fileQueued事件来实现

uploader.on( 'fileQueued', function(file){

// 符合条件的视频才会加进队列，包括大小，后缀，数量限制

//设置文件loading状态

uploader.md5File(file)

// 及时显示进度

.progress(function(percentage){

//可根据percentage显示获取文件信息时的进度

})

//完成

.then(function(md5Val){

//开始执行上传操做

})

})

复制代码

显示文件上传进度

//显示文件上传进度

uploader.on( 'uploadProgress', function(file, percentage){

var $uploading= $('.js-uploading-'+file.id);

var progressWid= (percentage*100)+'%';

$uploading.find('.js-bar').width(progressWid);

});

复制代码

文件上传失败处理

//文件上传失败处理

uploader.on( 'uploadError', function(file, reason){

$('.js-uploading-'+file.id).addClass('hidden');

uploader.cancelFile(file);//清空队列占位

});

复制代码

选择文件错误处理

uploader.on('error', errorHandler);

复制代码

至此视频上传功能，基本能实现。

tips:

弹出窗显示上传按钮功能时，需注意初始化的时间以及销毁 webuploader 实例，应当在modal显示后，以及隐藏后回调处理。

当实现多选文件上传时，需匹配好上传分块时的参数

IE8浏览器弹窗显示文件选择按钮可能会出现flash错误问题，只需在弹窗显示彻底时，用样式调整便可