2024年9月webuploader（webuploader分片上传的实现代码（前后端分离））

　　⑴webuploader（webuploader分片上传的实现代码（前后端分离

　　⑵您可能感兴趣的文章:Vue.结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能（二webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码jQuerywebuploader分片上传大文件,跳过“,);}else{returnRETURN.suess(“分片不存在“,);}}}/***文件上传**paramfile*paramuploadVO*paramappVersion*return*/publicObjectupload(MultipartFilefile,UploadVOuploadVO){Longchunk=uploadVO.getChunk();if(chunk==null){//没有分片returnUnChunkUpload(file,uploadVO);}else{//分片returnChunkUpload(file,uploadVO);}}/***分片上传**paramfile*paramuploadVO*paramappVersion*return*/publicObjectChunkUpload(MultipartFilefile,UploadVOuploadVO){StringfileName=uploadVO.getName();StringfileMd=uploadVO.getFileMd();Longchunk=uploadVO.getChunk();//当前片Longchunks=uploadVO.getChunks();//总共多少片//分片目录创建StringchunkDirPath=UPLOAD_PATH+File.separator+fileMd;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);returnRETURN.fail(“分片上传出错“,);}//合并分片LongchunkSize=uploadVO.getChunkSize();longseek=chunkSize*chunk;StringdestFilePath=UPLOAD_PATH+File.separator+fileName;FiledestFile=newFile(destFilePath);if(chunkFile.length()》){try{FileUtil.randomAessFile(chunkFile,destFile,seek);}catch(IOExceptione){LOG.error(“分片{}合并失败：{}“,chunkFile.getName(),e.getMessage());returnRETURN.fail(“分片合并失败“,);}}if(chunk==chunks-){//删除分片文件夹FileUtil.deleteDirectory(chunkDirPath);returnRETURN.suess(“上传成功“,);}else{returnRETURN.fail(“上传中...“,);}}/***未分片上传**paramfile*paramuploadVO*paramappVersion*return*/publicObjectUnChunkUpload(MultipartFilefile,UploadVOuploadVO){StringfileName=uploadVO.getName();//StringfileMd=uploadVO.getFileMd();//文件上传FiledestFile=newFile(UPLOAD_PATH+File.separator+fileName);if(file!=null&&!file.isEmpty()){//上传目录FilefileDir=newFile(UPLOAD_PATH);if(!fileDir.exists()){fileDir.mkdirs();}if(destFile.exists()){destFile.delete();}try{file.transferTo(destFile);returnRETURN.suess(“上传成功“,);}catch(Exceptione){LOG.error(“文件上传出错“,e);returnRETURN.fail(“文件上传出错“,);}}returnRETURN.fail(“上传失败“,);}}以上就是本文的全部内容,既可以上传图片也可以上传文件,disableGlobalDnd:true,fileNumLimit://限制多文件上传的个数//fileSizeLimit:**,//限制所有文件的大小M//fileSingleSizeLimit:**//限制单个文件的大小M});后端importjava.io.File;importjava.io.IOException;import.slfj.Logger;import.slfj.LoggerFactory;import.springframework.beans.factory.annotation.Value;import.springframework.stereotype.Service;import.springframework.web.multipart.MultipartFile;import.bear.upload.util.FileUtil;import.bear.upload.util.RETURN;import.bear.upload.vo.CheckMdFileVO;import.bear.upload.vo.UploadVO;ServicepublilassChunkUploadService{privatestaticLoggerLOG=LoggerFactory.getLogger(ChunkUploadService.class);Value(“${file.upload.path}“)privateStringUPLOAD_PATH;privatestaticfinalStringDelimiter=“-“;/***上传之前校验(整个文件、分片)**parammdFileVO*return*/publicObjectcheck(CheckMdFileVOmdFileVO){Integertype=mdFileVO.getType();Longchunk=mdFileVO.getChunk();StringfileName=mdFileVO.getFileName();LongfileSize=mdFileVO.getFileSize();if(type==){//未分片校验StringdestfilePath=UPLOAD_PATH+File.separator+fileName;FiledestFile=newFile(destfilePath);if(destFile.exists()&&destFile.length()==fileSize){returnRETURN.suess(“文件已存在,采用大文件分片并发上传,、分片上传已做md校验,跳过“,);}else{returnRETURN.suess(“文件不存在“,);}}else{//分片校验StringfileMd=mdFileVO.getFileMd();StringdestFileDir=UPLOAD_PATH+File.separator+fileMd;StringdestFileName=chunk+Delimiter+fileName;StringdestFilePath=destFileDir+File.separator+destFileName;FiledestFile=newFile(destFilePath);if(destFile.exists()&&destFile.length()==fileSize){returnRETURN.suess(“分片已存在,FLASH为辅的现代文件上传组件。

　　⑶webuploader分片上传的实现代码（前后端分离

　　⑷本文介绍了webuploader分片上传的实现代码（前后端分离，分享给大家，具体如下：WebUploader是由BaiduWebFE(FEX)团队开发的一个简单的以HTML为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE+，iOS+,android+。两套运行时，同样的调用方式，可供用户任意选用。采用大文件分片并发上传，极大的提高了文件上传效率。(这个是从官网上直接copy的解释)功能描述、webuploader是百度研发的上传组件，文档不是特别规整，但是也够用了。、前端使用官网的上传图片demo，在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。、分片上传已做md校验，达到秒传的效果。分片以后需要合并，可以先分片后合并，也可以边分片边合并，本示例采用的是边分片边合并的方案。、后端用springboot做框架搭建。springMVC做rest服务，开启跨域访问。、容器用springboot内置的tomcat插件，运行Application的main方法即可启动服务；显示效果关键代码前端WebUploader.Uploader.register({’name’:’webUploaderHookmand’,’before-send-file’:’beforeSendFile’,“before-send“:“beforeSend“},{beforeSendFile:function(file){vartask=newWebUploader.Deferred();fileName=file.name;fileSize=file.size;(newWebUploader.Uploader()).mdFile(file,,**).progress(function(percentage){}).then(function(val){fileMd=val;varurl=checkUrl;vardata={type:,fileName:fileName,fileMd:fileMd,fileSize:fileSize};$.ajax({type:“POST“,url:url,data:data,cache:false,async:false,//同步timeout:,//todo超时的话，只能认为该分片未上传过dataType:“json“,error:function(XMLHttpRequest,textStatus,errorThrown){file.statusText=’server_error’;task.reject();}}).then(function(data,textStatus,jqXHR){if(data.rtn==){if(data.obj==){file.statusText=’file_existed’;task.reject();}else{task.resolve();}}else{task.reject();}});});returntask.promise();},beforeSend:function(block){vartask=newWebUploader.Deferred();varurl=checkUrl;vardata={type:,fileName:fileName,fileMd:fileMd,chunk:block.chunk,fileSize:block.end-block.start};$.ajax({type:“POST“,url:url,data:data,cache:false,async:false,//同步timeout:,//todo超时的话，只能认为该分片未上传过dataType:“json“}).then(function(data,textStatus,jqXHR){if(data.rtn==&&data.obj==){task.reject();//分片存在，则跳过上传}else{task.resolve();}});this.owner.options.formData.fileMd=fileMd;this.owner.options.formData.chunkSize=chunkSize;returntask.promise();}});//实例化uploader=WebUploader.create({pick:{id:’#filePicker’,label:’点击选择文件’},formData:{uid:},dnd:’#dndArea’,//指定文件拖拽的区域paste:’#uploader’,//指定监听paste事件的容器，如果不指定，不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为document.body.swf:’禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。disableGlobalDnd:true,fileNumLimit://限制多文件上传的个数//fileSizeLimit:**,//限制所有文件的大小M//fileSingleSizeLimit:**//限制单个文件的大小M});后端importjava.io.File;importjava.io.IOException;import.slfj.Logger;import.slfj.LoggerFactory;import.springframework.beans.factory.annotation.Value;import.springframework.stereotype.Service;import.springframework.web.multipart.MultipartFile;import.bear.upload.util.FileUtil;import.bear.upload.util.RETURN;import.bear.upload.vo.CheckMdFileVO;import.bear.upload.vo.UploadVO;ServicepublilassChunkUploadService{privatestaticLoggerLOG=LoggerFactory.getLogger(ChunkUploadService.class);Value(“${file.upload.path}“)privateStringUPLOAD_PATH;privatestaticfinalStringDelimiter=“-“;/***上传之前校验(整个文件、分片)**parammdFileVO*return*/publicObjectcheck(CheckMdFileVOmdFileVO){Integertype=mdFileVO.getType();Longchunk=mdFileVO.getChunk();StringfileName=mdFileVO.getFileName();LongfileSize=mdFileVO.getFileSize();if(type==){//未分片校验StringdestfilePath=UPLOAD_PATH+File.separator+fileName;FiledestFile=newFile(destfilePath);if(destFile.exists()&&destFile.length()==fileSize){returnRETURN.suess(“文件已存在，跳过“,);}else{returnRETURN.suess(“文件不存在“,);}}else{//分片校验StringfileMd=mdFileVO.getFileMd();StringdestFileDir=UPLOAD_PATH+File.separator+fileMd;StringdestFileName=chunk+Delimiter+fileName;StringdestFilePath=destFileDir+File.separator+destFileName;FiledestFile=newFile(destFilePath);if(destFile.exists()&&destFile.length()==fileSize){returnRETURN.suess(“分片已存在，跳过“,);}else{returnRETURN.suess(“分片不存在“,);}}}/***文件上传**paramfile*paramuploadVO*paramappVersion*return*/publicObjectupload(MultipartFilefile,UploadVOuploadVO){Longchunk=uploadVO.getChunk();if(chunk==null){//没有分片returnUnChunkUpload(file,uploadVO);}else{//分片returnChunkUpload(file,uploadVO);}}/***分片上传**paramfile*paramuploadVO*paramappVersion*return*/publicObjectChunkUpload(MultipartFilefile,UploadVOuploadVO){StringfileName=uploadVO.getName();StringfileMd=uploadVO.getFileMd();Longchunk=uploadVO.getChunk();//当前片Longchunks=uploadVO.getChunks();//总共多少片//分片目录创建StringchunkDirPath=UPLOAD_PATH+File.separator+fileMd;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);returnRETURN.fail(“分片上传出错“,);}//合并分片LongchunkSize=uploadVO.getChunkSize();longseek=chunkSize*chunk;StringdestFilePath=UPLOAD_PATH+File.separator+fileName;FiledestFile=newFile(destFilePath);if(chunkFile.length()》){try{FileUtil.randomAessFile(chunkFile,destFile,seek);}catch(IOExceptione){LOG.error(“分片{}合并失败：{}“,chunkFile.getName(),e.getMessage());returnRETURN.fail(“分片合并失败“,);}}if(chunk==chunks-){//删除分片文件夹FileUtil.deleteDirectory(chunkDirPath);returnRETURN.suess(“上传成功“,);}else{returnRETURN.fail(“上传中...“,);}}/***未分片上传**paramfile*paramuploadVO*paramappVersion*return*/publicObjectUnChunkUpload(MultipartFilefile,UploadVOuploadVO){StringfileName=uploadVO.getName();//StringfileMd=uploadVO.getFileMd();//文件上传FiledestFile=newFile(UPLOAD_PATH+File.separator+fileName);if(file!=null&&!file.isEmpty()){//上传目录FilefileDir=newFile(UPLOAD_PATH);if(!fileDir.exists()){fileDir.mkdirs();}if(destFile.exists()){destFile.delete();}try{file.transferTo(destFile);returnRETURN.suess(“上传成功“,);}catch(Exceptione){LOG.error(“文件上传出错“,e);returnRETURN.fail(“文件上传出错“,);}}returnRETURN.fail(“上传失败“,);}}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。您可能感兴趣的文章:Vue.结合webuploader实现文件分片上传功能使用WebUploader实现分片断点上传文件功能（二webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码jQuerywebuploader分片上传大文件