webuploader分片上传的实现代码(前后端分离)

时间:2013.02.20 发布人:psjxyqjxk

webuploader分片上传的实现代码(前后端分离)

已解决问题

谷歌psjxyqjxk用户在2013.02.20提交了关于“一点资讯webuploader分片上传的实现代码(前后端分离)”的提问,欢迎大家涌跃发表自己的观点。目前共有1个回答,最后更新于2025-02-24T08:20:49。希望大家能够帮助她。

详细问题描述及疑问:期待您的答案,谢了,下次有事儿别忘了找我 !

希望以下的回答,能够帮助你。

第1个回答

用户名:graywolf2012  

本文介绍了webuploader分片上传的实现代码(前后端分离),分享给大家,具体如下:

WebUploader是由Bai**WebFE(FEX)团队开发的一个简单的以h**TML5为主,FLASh**为辅的现代文件上传组件。在现代的浏览器里面能充分发挥h**TML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASh**运行时,兼容IE6+,iOS6+,android问答4+。两套运行时,同样美兵教年世的调用方式,可供用户任她心意选用。采用大文件分片并发上传,极大的提高了文件上传效率。(这个是从官网上直接copy的解释)

功能描述

1、webuplo皮这宁京叫试至照露ader是百度研发的上传组件,文档不是特别规整,但是也够用了。

2、前端使用官网的上传图片demo,在此基础上代码喜略微调整做分片。既可以上命对单急斤煤云传图片也可以上传文件。文件超过分片大小才启用分片。

3、分片上传已做md5校验,达到秒传的效果。分片以后需要合并,可以先分片后合并,也可以边分片边合并,本示例采用的是边分片边合并的方案。

4、后端用springboot做框架搭建。springMVC做rest服务,开启跨域访问。

5、容器用springboot内置的tomcat插件,运行Application的main方法即可启动服务;

显示效果




关键代码前端

WebUploader.Uploader.register({'name':'webUploaderh**ookCommand','before-send-file':'beforeSendFile',"before-send":"神继效位议氢工预念立承beforeSend"},{befo评胶专段座宁质志reSendFile:fu个则名nction(fi镇le){vartask=任负夫孔银者财newWebUploader.Deferred();f存逐措厚革袁哥天按ileName=***.name;fileSize=file.size;(newWebU季系培罪节州省环ploader.Uploader()).md5File(file,0,10*1024*1024).progress(functio额愿基止历另眼胡n(percenta海与厚短ge){}).then(function(val){fileMd5=val;varurl=check接轴抗扩丝房员关温Url;vardata={导还稳跟前查赵室type:0,fileName:fileName,fileMd5:fileMd5,fileSize:fileSize};$.ajax({type:"POST",url:url,data:data,cache:false,async:false,//同步timeout:1000,//todo超时的话,只能认为该分片未上传过dataType:"json",error:function(XMLh**ttpRequest,textStatus,errorThrown){file.statusText='server_error';task.reject();}}).then(function(data,textStatus,jqXh**R){if(data.rtn==0){if(data.obj==1){file.statusText='file_existed';task.reject();}else{task.resolve();}}else{task.reject();}});});returntask.promise();},beforeSend:function(block){vartask=newWebUploader.Deferred();varurl=checkUrl;vardata={type:1,fileName:fileName,fileMd5:fileMd5,chunk:block.chunk,fileSize:block.end-block.start};$.ajax({type:"POST",url:url,data:data,cache:false,async:false,//同步timeout:1000,//todo超时的话,只能认为该分片未上传过dataType:"json"}).then(function(data,textStatus,jqXh**R){if(data.rtn==0&&data.obj==1){task.reject();//分片存在,则跳过上传}else{task.resolve();}});this.owner.options.formData.fileMd5=fileMd5;this.owner.options.formData.chunkSize=chunkSize;returntask.promise();}});//实例化uploader=WebUploader.create({pick:{id:'#filePicker',label:'点击选择文件'},formData:{uid:123},dnd:'#dndArea',//指定文件拖拽的区域paste:'#uploader',//指定**paste事件的容器,如果不指定,不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.swf:'../plugins/webuploader/Uploader.swf',chunked:true,chunkSize:chunkSize,chunkRetry:false,threads:1,server:uploadUrl,//runtimeOrder:'flash',//accept:{//title:'Images',//extensions:'gif,jpg,jpeg,bmp,png',//mimeTypes:'image/*'//},//禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。disableGlobalDnd:true,fileNumLimit:300//限制多文件上传的个数//fileSizeLimit:200*1024*1024,//限制所有文件的大小200M//fileSingleSizeLimit:50*1024*1024//限制单个文件的大小50M});

后端

importj**a.io.File;importj**a.io.IOException;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.stereotype.Service;importorg.springframework.web.multipart.MultipartFile;importcom.bear.upload.util.FileUtil;importcom.bear.upload.util.RETURN;importcom.bear.upload.vo.CheckMd5FileVO;importcom.bear.upload.vo.UploadVO;@ServicepublicclassChunkUploadService{privatestaticLoggerLOG=LoggerFactory.getLogger(ChunkUploadService.class);@Value("${file.upload.path}")privateStringUPLOAD_PATh**;privatestaticfinalStringDelimiter="-";/***上传之前校验(整个文件、分片)**@parammd5FileVO*@return*/publicObjectcheck(CheckMd5FileVOmd5FileVO){Integertype=md5FileVO.getType();Longchunk=md5FileVO.getChunk();StringfileName=md5FileVO.getFileName();LongfileSize=md5FileVO.getFileSize();if(type==0){//未分片校验StringdestfilePath=UPLOAD_PATh**+File.separator+fileName;FiledestFile=newFile(destfilePath);if(destFile.exists()&&destFile.length()==fileSize){returnRETURN.success("文件已存在,跳过",1);}else{returnRETURN.success("文件不存在",0);}}else{//分片校验StringfileMd5=md5FileVO.getFileMd5();StringdestFileDir=UPLOAD_PATh**+File.separator+fileMd5;StringdestFileName=chunk+Delimiter+fileName;StringdestFilePath=destFileDir+File.separator+destFileName;FiledestFile=newFile(destFilePath);if(destFile.exists()&&destFile.length()==fileSize){returnRETURN.success("分片已存在,跳过",1);}else{returnRETURN.success("分片不存在",0);}}}/***文件上传**@paramfile*@paramuploadVO*@paramappVersion*@return*/publicObjectupload(MultipartFilefile,UploadVOuploadVO){Longchunk=uploadVO.getChunk();if(chunk==**ll){//没有分片returnUnChunkUpload(file,uploadVO);}else{//分片returnChunkUpload(file,uploadVO);}}/***分片上传**@paramfile*@paramuploadVO*@paramappVersion*@return*/publicObjectChunkUpload(MultipartFilefile,UploadVOuploadVO){StringfileName=uploadVO.getName();StringfileMd5=uploadVO.getFileMd5();Longchunk=uploadVO.getChunk();//当前片Longchunks=uploadVO.getChunks();//总**多少片//分片目录创建StringchunkDirPath=UPLOAD_PATh**+File.separator+fileMd5;FilechunkDir=newFile(chunkDirPath);if(!chunkDir.exists()){chunkDir.mkdirs();}//分片文件上传StringchunkFileName=chunk+Delimiter+fileName;StringchunkFilePath=chunkDir+File.separator+chunkFileName;FilechunkFile=newFile(chunkFilePath);try{file.transferTo(chunkFile);}catch(Exceptione){LOG.error("分片上传出错",e);return***.fail("分片上传出错",1);}//合并分片LongchunkSize=uploadVO.getChunkSize();longseek=chunkSize*chunk;StringdestFilePath=UPLOAD_PATh**+File.separator+fileName;FiledestFile=newFile(destFilePath);if(chunkFile.length()>0){try{FileUtil.randomAccessFile(chunkFile,destFile,seek);}catch(IOExceptione){LOG.error("分片{}合并失败:{}",chunkFile.getName(),e.getMessage());return***.fail("分片合并失败",1);}}if(chunk==chunks-1){//删除分片文件夹FileUtil.deleteDirectory(chunkDirPath);returnRETURN.success("上传成功",1);}else{return***.fail("上传中",1);}}/***未分片上传**@paramfile*@paramuploadVO*@paramappVersion*@return*/publicObjectUnChunkUpload(MultipartFilefile,UploadVOuploadVO){StringfileName=uploadVO.getName();//StringfileMd5=uploadVO.getFileMd5();//文件上传FiledestFile=newFile(UPLOAD_PATh**+File.separator+fileName);if(file!=**ll&&!file.isEmpty()){//上传目录FilefileDir=newFile(UPLOAD_PATh**);if(!fileDir.exists()){fileDir.mkdirs();}if(destFile.exists()){destFile.delete();}try{file.transferTo(destFile);returnRETURN.success("上传成功",0);}catch(Exceptione){LOG.error("文件上传出错",e);return***.fail("文件上传出错",0);}}return***.fail("上传失败",0);}}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:Vue2.0结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能(二)webuploader在springMVC+jquery+J**a开发环境下的大文件分片上传的实例代码jQuerywebuploader分片上传大文件