当前位置: 首页 > Web前端 > JavaScript

大文件上传

时间:2023-03-26 21:48:47 JavaScript

bigFileUpload.jsconstpath=require('path')importaxiosfrom'axios'import{resolve}from'path';import{promised}from'q';//递归调用请求异步函数dg(requestMargreList,options,key=0){letindex=keyconstrequestList=requestMargreList[key].map(({formData})=>{returnmultipartUploadUpload(formData,options)});constresArr=awaitPromise.all(requestList);letboolean=resArr.every(item=>item?.data?.status=='SUCCEED')if(boolean){index++if(index==requestMargreList.length){return{uploadFlag:true,msg:'上传切片文件成功'}}returndg(requestMargreList,options,index)}else{constres_err=resArr.map(item=>item?.data?.status!='SUCCEED')return{uploadFlag:false,msg:'There上传切片文件出错,请重试'}}}//文件切片函数createFileChunk(file,size){letfileChunkList=[];让当前=0;while(cur{//添加worker属性container.worker=newWorker("/static/hash.js");container.worker.postMessage({fileChunkList});container.worker.onmessage=e=>{const{percentage,hash}=e.data;//总进度变化//hashPercentage=percentage;options.showHash(percentage)if(hash){resolve(hash);}};})}functiongetMultipartLogId(params){returnnewPromise(resolve=>{axios.post('api/multipartUploadInit',params).then(res=>{resolve(res)})})}letglobalPercentage=0;functionmultipartUploadUpload(formData,options){returnaxios.post('api/multipartUploadUpload',formData,{onUploadProgress:function(upEvent){//文件上传总进度letpercentage=((options.size*(formData.get('chunkIndex')-1)+upEvent.loaded)/options.fileSize)*100//options.size是分片后每个slice的大小options.fileSize是总文件大小百分比是计算后的总进度if(percentage>globalPercentage){globalPercentage=percentage;}if(globalPercentage>100)globalPercentage=100;options.showFileProgress(globalPercentage)}})}asyncfunctionuploadChunks(fileChunkList,options){letreqMargeArr=[],reqSize=3,uploadResObj={};让reqBeforeList=fileChunkList.map(({multipartLogId,hash,file,fileName,chunkIndex})=>{constformData=newFormData();formData.append("multipartLogId",multipartLogId);formData.append("hash",hash);formData.append("file",file);formData.append("fileName",fileName);formData.append("chunkIndex",chunkIndex);重新转{formData};})if(reqBeforeList.length>reqSize){for(leti=0;i{returnmultipartUploadUpload(formData,options)});让resArr=awaitPromise.all(requestList);constuploadFlag=resArr.every(item=>item?.data?.status=='SUCCEED')uploadResObj={uploadFlag,msg:uploadResObj.uploadFlag?'上传切片文件成功':'上传切片文件出错files,pleasetryagain'}}if(uploadResObj.uploadFlag){//completeFunc函数中有回调接口判断是否合并成功setTimeout(()=>{completeFunc(fileChunkList[0].multipartLogId,options)},1000)}else{returnuploadResObj}}functioncompleteFunc(multipartLogId,options){returnaxios.post('api/multipartUploadComplete',{multipartLogId}).then(res=>{options.completeFunc(res)})}asyncfunctionbigFileUpload(file,options={},fileOptions){letcontainer={}letfileChunkList=createFileChunk(文件,选项?.size);constfileHash=awaitcalculateHash(fileChunkList,container,options);fileOptions.hash=fileHashconstupFileParams=awaitgetMultipartLogId(fileOptions)//删除已上传的文件letfileChunkListArr=[];让百分比=0;if(upFileParams.data.status=='SUCCEED'){让chunkIndexs=upFileParams?.data?.data?.chunkIndexs;if(chunkIndexs?.length>0){fileChunkList.map(({file},index)=>{if(!chunkIndexs.includes(index+1)){fileChunkListArr.push({multipartLogId:upFileParams.data.data.multipartLogId,chunkIndex:index+1,hash:fileHash,文件:文件,文件名:fileOptions.fileName,})}});percentage=percentage+(chunkIndexs.length*fileOptions.chunkSize/options.fileSize)*100options.showFileProgress(percentage)}else{fileChunkList.map(({file},index)=>{fileChunkListArr.push({multipartLogId:upFileParams.data.data.multipartLogId,chunkIndex:index+1,hash:fileHash,file:file,fileName:fileOptions.fileName,})});}if(fileChunkListArr.length>0){//上传文件切片constuploadRes=awaituploadChunks(fileChunkListArr,options,percentage)returnuploadRes}else{completeFunc(upFileParams.data.data.multipartLogId,options)}}else{return{uplodFlag:false,msg:upFileParams.data.extMessage}}}exportdefaultbigFileUploadimportbigFileUploadfrom'./components/bigFileUpload'//大文件上传//分片大小bigFileUploadletfileParams={size:bigSize,//切片大小fileSize:fileTem.size,showHash:this.showHash,showFileProgress:this.showFileProgress,completeFunc:this.completeFunc,}this.fileOptions=fileOptionsconstres=awaitbigFileUpload(fileTem,fileParams,fileOptions)console.log("=====bigupres========",res)if(res&&!res.uplodFlag){_this.$Notice.error({title:'提醒',desc:res.msg})返回}