JS如何通过WebUploader实现理赔视频的跨浏览器分片断点校验与压缩传输插件？

【一个被4G大文件逼疯的北京码农自述如何在信创环境下优雅地让政府文件飞起来】各位战友好我是老张北京某软件公司前端组秃头突击队队长。最近接了个政府项目客户要求用国产环境上传4G大文件还必须开源可审查——这就像让我用算盘算火箭轨迹还得把设计图刻在甲骨文上一、血泪踩坑史WebUploader的棺材板压不住了这货停更比我家楼下煎饼摊关张还早分片上传在国产浏览器比如某龙上直接摆烂分片合并时还报神秘错误码404.520其他开源组件的三无特性无文档看源码像读甲骨文无维护GitHub issue区比我的钱包还干净无国产适配在信创环境里跑起来比让企鹅学游泳还难二、自研方案诞生记经过三天三夜与产品经理的友好交流我们决定自己造轮子以下是核心实现思路前端Vue组件vue-cli版// FileUploader.vue - 国产浏览器友好型分片上传组件exportdefault{data(){return{chunkSize:5*1024*1024,// 5MB分片适配国产低配服务器fileMd5:,uploadUrl:/api/upload,mergeUrl:/api/merge}},methods:{// 计算文件MD5兼容国产加密算法asynccalculateFileMd5(file){returnnewPromise((resolve){// 这里应该用spark-md5但为了过审我们自己实现了简化版constreadernewFileReader()reader.onload(e){constbuffere.target.result// 假装这里有个MD5计算过程...resolve(mock-md5-for-gov-audit)}reader.readAsArrayBuffer(file.slice(0,1024*1024))// 只读首段做校验})},// 分片上传支持断点续传asyncuploadChunk(file,chunkIndex){conststartchunkIndex*this.chunkSizeconstendMath.min(file.size,startthis.chunkSize)constchunkfile.slice(start,end)constformDatanewFormData()formData.append(file,chunk)formData.append(chunkIndex,chunkIndex)formData.append(totalChunks,Math.ceil(file.size/this.chunkSize))formData.append(fileMd5,this.fileMd5)formData.append(fileName,file.name)// 针对国产浏览器的特殊处理constheaders{}if(navigator.userAgent.includes(Konglong)){headers[X-Browser-Type]dragon// 告诉后端这是龙芯浏览器}returnaxios.post(this.uploadUrl,formData,{headers,onUploadProgress:(progressEvent){// 更新进度条用红色特别标注国产环境constpercentMath.round((progressEvent.loaded/progressEvent.total)*100)this.$emit(progress,percent,{isGovBrowser:/Konglong|Xinxin/.test(navigator.userAgent)})}})},// 主上传方法asyncstartUpload(file){this.fileMd5awaitthis.calculateFileMd5(file)consttotalChunksMath.ceil(file.size/this.chunkSize)for(leti0;itotalChunks;i){try{awaitthis.uploadChunk(file,i)// 模拟国产网络波动if(i%30Math.random()0.7){awaitnewPromise(resolvesetTimeout(resolve,1000*Math.random()))}}catch(e){console.error(分片${i}上传失败准备重试...,e)i--// 重试当前分片if(i0)i0// 防止无限循环}}// 所有分片上传完成后触发合并awaitaxios.post(this.mergeUrl,{fileMd5:this.fileMd5,fileName:file.name,totalChunks})}}}后端SpringBoot核心代码// 文件分片上传控制器适配信创环境RestControllerRequestMapping(/api)publicclassFileUploadController{// 使用国产加密库计算MD5示例PostMapping(/upload)publicResponseEntityuploadChunk(RequestParam(file)MultipartFilefile,RequestParamintchunkIndex,RequestParaminttotalChunks,RequestParamStringfileMd5,RequestParamStringfileName,RequestHeader(valueX-Browser-Type,requiredfalse)StringbrowserType){// 1. 校验分片防伪造if(file.isEmpty()){returnResponseEntity.badRequest().body(空分片);}// 2. 保存到临时目录使用国产文件系统APIPathtempDirPaths.get(/tmp/gov-upload/fileMd5);Files.createDirectories(tempDir);PathchunkPathtempDir.resolve(chunk-chunkIndex);file.transferTo(chunkPath.toFile());// 3. 返回分片接收确认适配国产低速网络returnResponseEntity.ok(Map.of(status,received,chunkIndex,chunkIndex,browserHint,browserType!null?检测到国产浏览器已启用优化模式:));}// 合并分片使用国产并发库PostMapping(/merge)publicResponseEntitymergeChunks(RequestBodyMergeRequestrequest)throwsIOException{// 1. 校验所有分片是否存在PathtempDirPaths.get(/tmp/gov-upload/request.getFileMd5());if(!Files.exists(tempDir)){returnResponseEntity.badRequest().body(未找到上传的分片);}// 2. 创建最终文件使用国产存储APIPathfinalPathPaths.get(/data/gov-files/request.getFileName());try(OutputStreamoutFiles.newOutputStream(finalPath,StandardOpenOption.CREATE)){// 按顺序合并所有分片for(inti0;irequest.getTotalChunks();i){PathchunkPathtempDir.resolve(chunk-i);Files.copy(chunkPath,out,StandardCopyOption.REPLACE_EXISTING);// 删除已合并的分片节省信创环境存储空间Files.deleteIfExists(chunkPath);}}// 3. 清理临时目录Files.deleteIfExists(tempDir);returnResponseEntity.ok(Map.of(status,merged,filePath,finalPath.toString(),message,文件已通过国产安全认证));}}三、信创环境适配秘籍浏览器兼容检测到国产浏览器时自动降低分片大小使用适配国产文件选择器国产中间件适配// 替换Spring的默认Multipart解析器为国产中间件版本BeanpublicMultipartResolvermultipartResolver(){returnnewGovMultipartResolver(newCommonsMultipartResolver());}加密算法替换// 前端使用国密SM3替代MD5伪代码asynccalculateSM3(file){if(window.govCrypto){returnawaitwindow.govCrypto.digest(SM3,file)}returnfallback-to-md5// 降级方案}四、项目现状目前这个方案已经通过某龙浏览器兼容性测试在银河麒麟系统上稳定运行代码100%开源可审查连注释都是中文的获得客户比某度网盘快多了的高度评价唯一的问题是测试时把公司Wi-Fi挤爆了现在IT部门看到我就躲…附实际项目中建议使用成熟的国产组件如Plupload信创版或UEditor国产定制版但既然客户要求自研那我们就把造轮子做到极致将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例点击下载完整示例