webuploader大文件分片上传 md5验证附件上传

最近项目需求使用到大附件上传功能，图片最多5M,视频100M,结合查询到的资料决定使用webuploader上传组件，项目展示效果如下：

流程图：

1.上传前判断文件格式，项目只支持.png,.jpeg,.jpg,.mp4的视频和图片

2.图片最多5M,视频100M

3.图片可多选上传，视频每次上传一个

4.上传前获取uuid、文件名称和总文件md5判断是否重名和是否已上传过

5.已上传过时跳过上传直接进度显示99，并执行保存缩略图这一步

6.上传时显示上传进度，默认5M分片,大小超出自动分片，获取每个分片的md5

7.上传完成后执行合并操作，将所有分片md5和uuid提交与后端

8.后端验证分片个数和所有分片md5个数，合并后的文件md5和总文件md5,返回保存的附件地址url

9.获取url对应的缩略图并执行保存缩略图

template

<template><el-row class="webUploader"><el-col :span="24" class="mb20" :style="{ display: 'flex' }"><div class="upload-area" :id="'drag'" v-show="is_upload"><div class="upload" ref="selectFile" :id="'up_single'" ><div class="upload-icon"><i class="el-icon-upload"></i></div><div class="upload-desc">将文件拖到此处，或<em>点击上传</em></div><div class="upload-tip">支持上传jpg/png/jpeg/mp4格式文件，图片文件不能超过5M，视频文件不能超过100M。</div></div></div><div class="upload-area" v-show="!is_upload"><div class="upload" >视频素材上传中请稍后......</div></div><el-dialogtitle="提示":visible.sync="dialogVisible"width="450px":show-close="false":before-close="handleClose"><span class="model-title" slot="title"> <span class="title">上传失败</span><span class="close" @click="dialogVisible = false"><i class="el-icon-close"></i></span></span><div class="model"><div class="text">素材不符合上传要求！</div><div class="text">支持上传jpg/png/jpeg/mp4格式文件，图片文件不能超过5M，视频文件不能超过100M。</div></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false" size="small">取 消</el-button><el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button></span></el-dialog><div class="upload-card" v-if="uploadLoading"><div class="title">素材上传进度</div><div class="card-wrap"><div class="card-item" v-for="(item,index) in value" :key="index"><div class="file-name"><i :icon="item.type" class="uploader-file-icon"></i><div class="name"> {{item.fileName}}</div></div><div class="fileProgress"><div class="bar-outer"><div class="bar-inner" :style="{width:item.fileProgress+'%'}"></div></div>{{item.fileProgress+'%' }}</div></div></div></div></el-col></el-row></template>

script

<script>//引入webuploaderimport WebUploader from "webuploader";import "webuploader/dist/webuploader.css";import api from "@/http/api.js";import BMF from 'browser-md5-file';var chunkObj = {};//用来记录文件的状态、上传中断的位置var md5Obj = {};//记录文件分片后所有分片的md5var GUID = WebUploader.Base.guid();//一个GUIDexport default {name: "uploaderList",components: {},props: {accept: {type: [String, Object],default: null},// 上传地址url: {type: String,default: "/mtv_back/api/mtv-backend/sysMaterial/fileUpload",///mtv_back/api/mtv-backend/operate/upLoadFile},// 上传最大数量 默认为100fileNumLimit: {type: Number,default: 100},// 大小限制 默认2MfileSingleSizeLimit: {type: Number,default: 5120000},fileType: {type: String,default: "knowledge"},// 上传时传给后端的参数，一般为token，key等formData: {type: Object,default: () => {return {uuid: null, code: 9,md5:null };}},// 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议keyGenerator: {type: Function,default: () => `${new Date().getTime()}`},multiple: {type: Boolean,default: true},// 上传按钮IDuploadButton: {type: String,default: ""},value: {type: Array,default: () => []},disabled: {type: Boolean,default: () => false},groupType:{type: String,default: ""},},data() {return {uploader: null,dialogVisible:false,collapse:false,panelShow:true,uploadLoading:false,Filesize:0,file_type:'',//保存切换目录之前的typeis_upload:true,//是否能继续上传，视频每次只能1个，图片可以多个fileObj:{//上传的文件对象}};},watch: {disabled(newVal) {if (newVal) {this.uploader.destroy();return false;}this.initWebUpload();},groupType(newVal){this.groupType = newVal;}},mounted() {if (!this.disabled) {this.$nextTick(()=>{console.log('初始化');this.uploader = this.initWebUpload();})}},methods: {handleClose(){this.dialogVisible=false;},initWebUpload() {console.log('初始化2');// if (this.uploader) {// this.uploader.destroy();// }let _this = this;WebUploader.Uploader.register({"before-send-file":"beforeSendFile","before-send": "beforeSend"}, {"beforeSendFile": function (file) {// var deferred = WebUploader.Deferred();// this.$axios.post({//url: "/PublicInfoManage/ResourceFile/isCheckFiles",//data: {// seq: seq,// fileMd5: $.md5(file.name + file.size + file.ext),// fileName:file.name//},//dataType: "json",//success: function (data) {// console.log(data);// chunkObj = data;// chunkObj.type = data.type;// chunkObj.chunk == data.chunk;// if (data.type == 0) {// deferred.reject();// //$("#" + file.id).find(".state").text("文件已上传");// } else if (data.type == 1) {// if (data.chunk) {// deferred.resolve();// }// } else {// deferred.resolve();// }//},//error: function () {// deferred.resolve();//}// })// deferred.resolve();// return deferred.promise();},"beforeSend": function (block) {//分块对象console.log('分块11',block);let _this = this;console.log('分块11',_this); if(_this.options.chunked){var deferred = WebUploader.Deferred();var curChunk = block.chunk;//第几个分片var totalChunk = block.chunks;//总共几个分片(new WebUploader.Uploader()).md5File(block.file, block.start, block.end).progress(function(percentage) {console.log("正在读取文件");}).then(function(val) {//block.md5 = val;console.log("分块的md5",val);console.log('当前的md5',_this.options.formData.md5);// _this.options.formData.chunk = block.chunk;// _this.options.formData.fileSize = block.file.size;//分片大小// if(block.file.name.indexOf('.jpg')!=-1 || block.file.name.indexOf('.jpeg')!=-1){// }else{// }if(md5Obj[block.file.name]){md5Obj[block.file.name].md5List[block.chunk] = val;}else{md5Obj[block.file.name] = {md5List:[],}md5Obj[block.file.name].md5List[block.chunk] = val;}//deferred.resolve();if(chunkObj[block.file.name] && chunkObj[block.file.name].lackList){//如果重传只传失败的if(chunkObj[block.file.name].lackList.indexOf(val)!=-1){//_this.options.formData.md5 = val;_this.options.formData.chunk = block.chunk;_this.options.formData.fileSize = block.file.size;//分片大小deferred.resolve();}else{deferred.reject();//跳过此分块}}else{////_this.options.formData.md5 = val;_this.options.formData.chunk = block.chunk;_this.options.formData.fileSize = block.file.size;//分片大小deferred.resolve();}})return deferred.promise();}}}); const uploader = (this.uploader = WebUploader.create({auto: true, // 选完文件后，是否自动上传server: this.url, // 文件接收服务端// swf: '/static/lib/webuploader/Uploader.swf', // swf文件路径 dnd:`#drag`,//拖拽容器,不指定则不开启pick: {id: `#up_single`, multiple: false },// pick: {// //pick: { id: "#up_single", multiple: false },// id: this.$refs.selectFile.$el, // 选择文件的按钮// multiple: this.multiple // 是否多文件上传 默认false// },//accept: this.getAccept(this.accept), // 允许选择文件格式。threads: 3,fileNumLimit: this.fileNumLimit, // 限制上传个数//fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小formData: this.formData, // 上传所需参数chunked: true, //分片上传chunkRetry:3,//允许重传3次//chunkSize: 2048000, //分片大小5120000,20Mduplicate: true, // 重复上传timeout: 0, //超时时间不设置超时限制compress: false,//不启用压缩resize: false,//尺寸不改变//上传文件格式// accept: {// extensions: "doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi",// mimeTypes: ".doc,.docx,.pdf,.txt,.xls,.xlsx,.jpg,.png,.mp4,.avi",// },// accept: {// extensions: "zip,rar,ios,7z",// mimeTypes: ".zip,.rar,.ios,.7z,",// },accept: {extensions: "jpg,png,jpeg,mp4",mimeTypes: ".jpg,.png,.jpeg,.mp4",},}));const fun = ["beforeFileQueued","fileQueued","uploadStart","uploadProgress","uploadSuccess","error","uploadError","uploadBeforeSend"];for (const item of fun) {uploader.on(item, this[item]);}return uploader;},beforeFileQueued(file){this.file_type = this.groupType;this.Filesize = file.sizeconsole.log('filestart',file);console.log('uploader1',this.uploader);if(!this.coverString('.png',file.name) && !this.coverString('.jpg',file.name) && !this.coverString('.jpeg',file.name) && !this.coverString('.mp4',file.name)){this.$message.error('文件格式不正确，请选择支持的图片或文件格式上传');if (file) {// 取消并中断文件上传this.uploader.cancelFile(file);// 在队列中移除文件this.uploader.removeFile(file, true);//this.value = [];//上传前清空上传记录this.uploadLoading = false;return;}}if(this.coverString('.jpg',file.name) || this.coverString('.png',file.name) || this.coverString('.jpeg',file.name)){//图片if(file.size>(5*1024*1024)){//20Mthis.dialogVisible = true;this.$message.error('素材过大，请注意上传素材的大小不要超过规定限制');if (file) {// 取消并中断文件上传this.uploader.cancelFile(file);// 在队列中移除文件this.uploader.removeFile(file, true);//this.value = [];//上传前清空上传记录this.uploadLoading = false;return;}}}if(this.coverString('.mp4',file.name)){//视频if(this.value.length>0){this.uploader.cancelFile(file);// 在队列中移除文件this.uploader.removeFile(file, true);this.$message.error('请等待图片上传完成后再上传视频');return;}if(file.size>(100*1024*1024)){//20Mthis.dialogVisible = true;this.$message.error('视频文件不能超过100M');// 取消并中断文件上传this.uploader.cancelFile(file);// 在队列中移除文件this.uploader.removeFile(file, true);//this.value = [];//上传前清空上传记录this.uploadLoading = false;return;if (file) {}}}//this.value = [];//上传前清空上传记录console.log('this.uploader',this.uploader);// //获取文件MD5let _this = this;// const bmf = new BMF();// bmf.md5(// file,// (err, md5) => {//console.log('err:', err);//console.log('md5 string:', md5); // 97027eb624f85892c69c4bcec8ab0f11////data.md5 = val;// },// progress => {//console.log('progress number:', progress);// },// );this.uploader.removeFile(file, true);let md5 = {}; (new WebUploader.Uploader()).md5File(file, 0, file.size).progress(function(percentage) {console.log("正在读取文件");}).then(function(val) {// this.uploader.md5File( file )// 及时显示进度// .progress(function(percentage) {//console.log('读取文件：'+parseInt(percentage*100)+"%");// })// // 完成// .then(function(val) {md5[file.id] = val;console.log('md5:',val);let params = {fileName:file.name,uuid:'',chunks:file.size>5242880?Math.ceil(file.size/5242880):1,fileSize:file.size,md5:val};params.uuid = _this.keyGenerator();//是否允许上传_this.$axios.post(api + `/mtv-backend/sysMaterial/filePreCheck`,params).then((res) => {console.log('res',res.data.data);if(res.data.data.allow){console.log('允许上传');_this.uploader.upload(file);// if(file.name.indexOf('.jpg')!=-1 || file.name.indexOf('.jpeg')!=-1){//jpg图片直接获取// if(md5Obj[file.name]){//md5Obj[file.name].md5List[0] = val;// }else{//md5Obj[file.name] = {// md5List:[],//}//md5Obj[file.name].md5List[0] = val;// }// }_this.fileObj[file.name] = {//添加附件的md5记录uuid:params.uuid,fileMd5List:[],count:1,}if(chunkObj[file.name]){delete chunkObj[file.name]}const {name, size, id } = file;const obj = {id,fileName: name,fileSize: WebUploader.Base.formatSize(size),fileProgress: 0,fileStatus: "待上传",file,type:'',groupType:_this.file_type};let text = '.doc,.docx,.pdf,.txt,.xls,.xlsx';let image = '.jpg,.png,.jpeg';let video = '.mp4';let audio = '.avi'if(name.indexOf('.zip')!=-1){obj.type='zip';}else{text.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='text';}})image.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='image';}})video.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='video';}})audio.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='audio';}})}//doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi_this.value.push(obj); _this.uploadLoading = true;if(obj.type=='video'){_this.is_upload=false;}else{_this.is_upload = true;}}else{if(res.data.data.materialUrl && res.data.data.materialUrl!=''){//直接返回url保存const {name, size, id } = file;const obj = {id,fileName: name,fileSize: WebUploader.Base.formatSize(size),fileProgress: 99,fileStatus: "待上传",file,type:'',groupType:_this.file_type};let text = '.doc,.docx,.pdf,.txt,.xls,.xlsx';let image = '.jpg,.png';let video = '.mp4';let audio = '.avi'if(name.indexOf('.zip')!=-1){obj.type='zip';}else{text.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='text';}})image.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='image';}})video.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='video';}})audio.split(',').forEach(item=>{if(_this.coverString(item,file.name)){obj.type='audio';}})}//doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi_this.value.push(obj);_this.uploadLoading = true;const params = {url:res.data.data.materialUrl,name:file.name,materialSize:file.size,file:null,groupType:_this.file_type};_this.findVideoPoster(params);//获取视频第一帧并上传}else{_this.$message({message: '名称不可重复',type: 'error'});_this.panelShow = false;//this.uploadLoading = false;//this.value = [];//上传前清空上传记录_this.uploader.cancelFile(file);// 在队列中移除文件_this.uploader.removeFile(file, true);}}})});// const { name, size, id } = file;// const obj = {//id,//fileName: name,//fileSize: WebUploader.Base.formatSize(size),//fileProgress: 0,//fileStatus: "待上传",//file,//type:'',//groupType:_this.file_type// };// let text = '.doc,.docx,.pdf,.txt,.xls,.xlsx';// let image = '.jpg,.png';// let video = '.mp4';// let audio = '.avi'// if(name.indexOf('.zip')!=-1){//obj.type='zip';// }else{//text.split(',').forEach(item=>{// if(name.indexOf(item)!=-1){// obj.type='text';// }//})//image.split(',').forEach(item=>{// if(name.indexOf(item)!=-1){// obj.type='image';// }//})//video.split(',').forEach(item=>{// if(name.indexOf(item)!=-1){// obj.type='video';// }//})//audio.split(',').forEach(item=>{// if(name.indexOf(item)!=-1){// obj.type='audio';// }//})// }// //doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi// _this.value.push(obj);// _this.uploadLoading = true;// if(obj.type=='video'){//_this.is_upload=false;// }else{//_this.is_upload = true;// }},uploadBeforeSend(block,data){console.log('block',block);var file = block.file;if(md5Obj[file.name]){data.md5 = md5Obj[file.name].md5List[block.chunk];}console.log("当前文件id", file.id);console.log("当前文件名", file.name);// 上传时添加自定义参数console.log('获取当前块上传参数',data);if(this.fileObj[file.name]){data.uuid = this.fileObj[file.name].uuid;if(this.fileObj[file.name].fileMd5List.indexOf(data.md5)==-1){this.fileObj[file.name].fileMd5List.push(data.md5);}}else{this.fileObj[file.name] = {uuid:data.uuid,fileMd5List:[],count:1}this.fileObj[file.name].fileMd5List.push(data.md5);}//this.uploader.removeFile(file, true);//let _this = this;// this.uploader.md5File( file )// 及时显示进度// .progress(function(percentage) {//console.log('读取文件：'+parseInt(percentage*100)+"%");// })// // 完成// .then(function(val) {// data.md5 = val;// _this.uploader.upload(file);// })},// 当有文件被添加进队列的时候，添加到页面预览fileQueued(file) {//this.value = [];//上传前清空上传记录},//获取视频第一帧做完封面findVideoPoster(file) {let self = thisreturn new Promise(function(resolve) {console.log('获取第一帧');try{let base64URL = ''let video = null;let eventName = '';if(self.coverString('.png',file.name) || self.coverString('.jpg',file.name) || self.coverString('.jpeg',file.name)){//video = document.createElement('image');video = new Image();eventName = 'load';video.setAttribute('crossOrigin', 'anonymous') //处理跨域console.log('获取第一帧001');video.onload = (()=>{console.log('获取第一帧003');let canvas = document.createElement('canvas')//let canvas = document.getElementById('myCanvas');//使用视频的宽高作为canvas、预览图的宽高let width = 200;let height = 200;canvas.width = widthcanvas.height = heightcanvas.getContext('2d').drawImage(video, 0, 0, width, height) //绘制canvasbase64URL = canvas.toDataURL('image/jpeg') //转换为base64，图片格式默认为png，这里修改为jpeglet fileName = String(new Date().getTime()) + parseInt(Math.random() * 100000) + '.jpeg'//const imgfile = self.data64toFile(base64URL)const imgfile = self.dataURLToFile(base64URL,fileName);file.file = imgfile;console.log('获取第一帧004');self.postInfo(file);})video.src = file.url;console.log('video',video);}else{video = document.createElement('video');eventName = 'loadeddata';video.setAttribute('crossOrigin', 'anonymous') //处理跨域video.setAttribute('src', file.url);video.currentTime = 1;video.addEventListener(eventName, function() {let canvas = document.createElement('canvas')//let canvas = document.getElementById('myCanvas');//使用视频的宽高作为canvas、预览图的宽高let width = 200;let height = 200;canvas.width = widthcanvas.height = heightcanvas.getContext('2d').drawImage(video, 0, 0, width, height) //绘制canvasbase64URL = canvas.toDataURL('image/jpeg') //转换为base64，图片格式默认为png，这里修改为jpeglet fileName = String(new Date().getTime()) + parseInt(Math.random() * 100000) + '.jpeg'//const imgfile = self.data64toFile(base64URL)const imgfile = self.dataURLToFile(base64URL,fileName);file.file = imgfile;console.log('上传素材',file);console.log('获取第一帧003');self.postInfo(file);})}}catch(err){console.log('err',err);}})},coverString(subStr,str){//判断字符串中是否存在子字符串，不区分大小写，处理素材大小写let reg = eval("/"+subStr+"/ig");return reg.test(str);},dataURLToFile(file,filename){const arr = file.split(',');const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});},data64toFile(base64URL) {const arr = base64URL.split(',')const mime = arr[0].match(/:(.*?);/)[1]const bstr = atob(arr[1])let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], {type: mime })},postInfo(file){//上传素材信息this.currentPage = 1;const formData = new FormData();formData.append('materialUrl',file.url);formData.append('materialType',file.groupType);formData.append('materialName',file.name);formData.append('thumbnail',file.file);formData.append('materialSize',Number(this.Filesize));this.$axios.post(api + "/mtv-backend/sysMaterial/saveSystemMaterial", formData,{headers:{'Content-Type': 'multipart/form-data',}}).then((res) => {console.log('res',res);if(res.data.code==200){this.$message({message: file.name+'上传成功',type: 'success'});let idx = -1;this.value.forEach((item,index)=>{if(item.fileName==file.name){idx = index}})console.log(this.value,idx);if(this.value[idx]){//设置进度100this.value[idx].fileProgress=100;}this.value.splice(idx,1);//删除上传记录if(this.value.length==0){this.uploadLoading = false;}this.is_upload = true;delete this.fileObj[file.name];//删除保存的md5记录delete md5Obj[file.name]this.$emit("input");}else{this.$message({message: file.name+'上传失败',type: 'error'});let idx = -1;this.value.forEach((item,index)=>{if(item.fileName==file.name){idx = index}})this.value.splice(idx,1);if(this.value.length==0){this.uploadLoading = false;}this.is_upload = true;}})},// 在这里可以准备好formData的数据uploadStart(file) {console.log('aa',file);this.uploader.options.formData.uuid = this.fileObj[file.name].uuid;},// 文件上传过程中创建进度条实时显示。uploadProgress(file, percentage) {const fileObj = this.value.find(obj => file.id == obj.id);fileObj.fileStatus = "上传中";//console.log('percentage',percentage);fileObj.fileProgress = parseInt(percentage * 100);fileObj.file = file;if(fileObj.fileProgress==100){fileObj.fileProgress = 99;}//this.$emit("input", this.value);},// 文件上传成功async uploadSuccess(file, res) {const fileObj = this.value.find(obj => file.id == obj.id);console.log('上传结果',file,res);if(res.code==200){fileObj.fileId = file.id;fileObj.fileStatus = "上传成功";//this.$emit("input", this.value);let form = this.fileObj[file.name];//发起合并请求this.$axios.post(api + "/mtv-backend/sysMaterial/fileMerge", form,{timeout: 120000 }).then((res) => {console.log('合并请求结果res',res);if(res.data.code==200){if(!res.data.data.lackList){//分块丢失if(res.data.data.materialUrl=='' || !res.data.data.materialUrl){//合并url出错this.showError(file);return;}if(chunkObj[file.name]){//重传完成删除记录delete chunkObj[file.name]}const params = {url:res.data.data.materialUrl,name:file.name,materialSize:res.data.data.fileSize,file:null,groupType:fileObj.groupType};this.findVideoPoster(params);//获取视频第一帧并上传}else{//重传分块if(this.fileObj[file.name].count>=3){//重传3次依旧失败则不重传this.showError(file);return;}chunkObj[file.name] = {//保存出错的分块lackList:res.data.data.lackList,}this.fileObj[file.name].count++;this.uploader.upload(file);}}else{//合并出错this.showError(file);}})}else{//上传失败this.showError(file);}},showError(file){this.$message({message: file.name+'上传失败',type: 'error'});let idx = -1;this.value.forEach((item,index)=>{if(item.name==file.name){idx = index}})this.value.splice(idx,1);if(this.value.length==0){this.uploadLoading = false;}this.is_upload = true;},error(type) {//报错信息console.log('error type',type);this.uploadLoading = false;let errorMessage = "";if (type === "F_EXCEED_SIZE") {errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /(1024 * 100)}M`;} else if (type === "Q_EXCEED_NUM_LIMIT") {errorMessage = "文件上传已达到最大上限数";} else {errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;}console.error(errorMessage);},uploadError(file){console.log('uploadError',file);this.$message({message: file.name+'文件上传失败',type: 'error'});let idx = -1;this.value.forEach((item,index)=>{if(item.name==file.name){idx = index}})this.value.splice(idx,1);if(this.value.length==0){this.uploadLoading = false;}this.is_upload = true; },// 开始resume(file) {this.uploader.upload(file);},// 暂停stop(file) {file.fileStatus = "暂停中";this.uploader.stop(file);},// 移除async remove(row, idx) {const {fileId, file } = row;try {//if (fileId) await delFileApi(fileId);this.value.splice(idx, 1);if (file) {// 取消并中断文件上传this.uploader.cancelFile(file);// 在队列中移除文件this.uploader.removeFile(file, true);}//this.$emit("input", this.value);} catch (error) {console.log(error);}},// 预览imgLook(fileId) {if (!fileId) {return false;}lookImg(fileId).then(res => {const sourceImages = [];sourceImages.push({thumbnail:process.env.VUE_APP_BASE_API +this.profile +res.data.thumbnailFile,source:process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile});// console.log(sourceImages);this.$refs.viewer.show(sourceImages, 0);});},//上传文件格式getAccept(accept) {switch (accept) {case "text":return {title: "Texts",exteensions: "doc,docx,xls,xlsx,ppt,pptx,pdf,txt",mimeTypes: ".doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"};case "video":return {title: "Videos",exteensions: "mp4",mimeTypes: ".mp4"};case "image":return {title: "Images",exteensions: "gif,jpg,jpeg,bmp,png,tif",mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.tif"};default:return accept;}},submitFile() {this.uploader.upload();},// cancelFileUpload(){//取消上传，调取接口删除上传文件流// const { fileId, file } = this.value[0];// // 取消并中断文件上传// this.uploader.cancelFile(file);// // 在队列中移除文件// this.uploader.removeFile(file, true);// this.$axios.post(api + "/mtv-backend/sysMaterial/saveSystemMaterial", {fileName:file.name})//.then((res) => {// console.log('res',res);// if(res.data.code==200){// }else{// }//})// },//文件大小单位换算sizeConversion(size){if (size < 1024) {size = size.toFixed(2) + "B";}else if (size < 1048576) {size = (size / 1024).toFixed(2) + "K";}else if (size < 1073741824) {size = (size / 1048576).toFixed(2) + "M";}else {size = (size / 1073741824).toFixed(2) + "G";}return size;},close() {//this.uploader.destroy();this.panelShow = false},}};</script>

style

<style lang="less" scoped>/deep/ .webuploader-pick{background-color: #fff;}/deep/ .el-dialog{border-radius: 4px;}/deep/ .el-dialog__header{background-color: whitesmoke;padding: 15px 20px 15px;box-shadow: rgb(233 233 233) 0px 1px 1px;border-radius: 4px 4px 0 0;}/deep/ .el-dialog__footer{box-shadow: rgb(233, 233, 233) 0px 1px 1px 0px inset;padding: 14px 20px 14px;}.upload-area{background-color: #f9f9f9;border: 1px dashed #d9d9d9;border-radius: 6px;box-sizing: border-box;width: 500px;height: 184px;text-align: center;cursor: pointer;overflow: hidden;margin-bottom: 30px;display: flex;align-items: center;justify-content: center;&:hover{border-color: #409EFF;background-color: #fff;.upload .upload-icon i{color: #409EFF;}}.upload{font-size: 14px;.upload-icon{margin-bottom: 20px;i{font-size: 67px;color: #C0C4CC;}}.upload-desc{color: #606266;font-size: 14px;text-align: center;margin-bottom: 20px;}.upload-tip{color: #999999;font-size: 14px;}}}.model-title{color:#333;font-weight:bold;font-size: 13px;display: flex;align-items: center;justify-content: space-between;.title{display: flex;align-items: center;}i{font-size: 20px;}.close{cursor: pointer;i{font-weight: 700;font-size: 20px;color: #999;}}}.model{margin-top: -20px;.tip{margin-bottom:10px;color:#333;font-weight:bold;}.text{line-height: 28px;font-size: 14px;color: #999;}}// .upload-list{// position: fixed;// width: 600px;// bottom: 0px;// left: 0;// z-index: 1;// border-top: 1px solid #d9d9d9;// background-color: #fff;// border: 1px solid #e2e2e2;// border-radius: 7px 7px 0 0;// box-shadow: 0 0 10px rgb(0 0 0 / 20%);//.file-title {// display: flex;// height: 40px;// line-height: 40px;// padding: 0 15px;// border-bottom: 1px solid #ddd;// font-size: 14px;// .operate {// flex: 1;// text-align: right;// i{// font-size: 18px;// }// .el-button {// display: inline-block;// line-height: 1;// white-space: nowrap;// cursor: pointer;// background: #FFF;// border: 1px solid #DCDFE6;// color: #606266;// -webkit-appearance: none;// text-align: center;// box-sizing: border-box;// outline: 0;// margin: 0;// transition: .1s;// font-weight: 500;// padding: 12px 20px;// font-size: 14px;// border-radius: 4px;// }// .el-button--text {// border-color: transparent;// color: #409EFF;// background: 0 0;// padding-left: 0;// padding-right: 0;// }// }// }// &.collapse {// .file-title {// background-color: #e7ecf2;// }// .file-list {// height: 0;// }//}// }.uploader-file-name{.uploader-file-icon[icon=zip]{background: url(../../assets/images/zip.png);}.uploader-file-icon[icon=text]{background: url(../../assets/images/text-icon.png);}.uploader-file-icon[icon=image]{background: url(../../assets/images/image-icon.png);}.uploader-file-icon[icon=video]{background: url(../../assets/images/video-icon.png);}.uploader-file-icon[icon=audio]{background: url(../../assets/images/audio-icon.png);}display: flex;.name{flex: 1;word-break: break-all;}.uploader-file-icon {width: 24px;height: 24px;display: inline-block;vertical-align: top;// margin-top: 13px;// margin-right: 8px;}}.upload-card{padding: 10px;border-radius: 4px;background-color: #fff;position: fixed;right: 60px;top: 60px;z-index: 99;box-shadow: 0 0 10px rgb(0 0 0 / 20%);color: #666;width: 300px;.title{font-size: 14px;font-weight: bold;margin-bottom: 16px;}.card-wrap{.card-item{.file-name{font-size: 12px;display: flex;.name{flex: 1;word-break: break-all;}i{width: 14px;height: 14px;margin-right: 4px;}.uploader-file-icon[icon=zip]{background: url(../../assets/images/zip.png);background-size: contain;}.uploader-file-icon[icon=text]{background: url(../../assets/images/text-icon.png);background-size: contain;}.uploader-file-icon[icon=image]{background: url(../../assets/images/image-icon.png);background-size: contain;}.uploader-file-icon[icon=video]{background: url(../../assets/images/video-icon.png);background-size: contain;}.uploader-file-icon[icon=audio]{background: url(../../assets/images/audio-icon.png);background-size: contain;}}.fileProgress{font-size: 12px;display: flex;align-items: center;.bar-outer{display: flex;align-items: center;border-radius: 100px;background-color: #ebeef5;overflow: hidden;position: relative;vertical-align: middle;margin-right: 4px;height: 8px;//width: 200px;flex: 1;.bar-inner{position: absolute;left: 0;top: 0;height: 100%;background-color: #409eff;text-align: right;border-radius: 100px;line-height: 1;white-space: nowrap;transition: width .6s ease;}}}}}}</style>

重点在于beforeSend获取到分片对象，WebUploader提供一个md5File函数获取文件流的md5，uploadBeforeSend函数自定义每个分片上传的参数，在WebUploader配置中记得加上compress：false,resize: false,否则组件在分片时会默认将分片压缩，导致总文件的md5与合并后的md5不一致

compress: false,//不启用压缩

resize: false,//尺寸不改变

(new WebUploader.Uploader()).md5File(block.file, block.start,

block.end)

.progress(function(percentage) {

console.log(“正在读取文件”);

})

.then(function(val) {

}）

参考文档：

/webuploader/doc/#WebUploader_Uploader_md5File

/hackerPJ-p-7563023.html