武汉码农の大文件上传奇遇记在长江边写信创代码各位好我是小王武汉光谷某软件公司防脱发小组组长。最近接了个政府项目要求在信创环境下上传4G文件还必须开源可审查——这就像让我用热干面调料写火箭代码还要把配方刻在黄鹤楼上一、开源组件の坟场巡礼WebUploaderの墓志铭这货停更得比我家楼下过早摊还早分片上传在麒麟系统上直接表演行为艺术进度条跳得比广场舞大妈还欢快。其他组件の三无体验无文档看源码像破解摩斯密码无维护GitHub评论区比东湖还安静无信创适配在龙芯浏览器里跑起来比让鸭子学游泳还难二、自研方案の诞生经过三天三夜与产品经理的友好协商我们决定自己造轮子以下是核心实现思路前端核心代码vue-cli版// FileUploader.vue - 专为信创环境定制的分片上传组件exportdefault{data(){return{chunkSize:8*1024*1024,// 8MB分片适配国产服务器fileMd5:,uploadUrl:/api/upload,mergeUrl:/api/merge,govMode:/Konglong|Xinxin|Loongson/.test(navigator.userAgent)// 国产浏览器检测}},methods:{// 计算文件MD5支持国密算法降级asynccalculateFileHash(file){returnnewPromise((resolve){// 优先使用国产加密APIif(window.govCrypto){constreadernewFileReader()reader.onload(e){window.govCrypto.digest(SM3,e.target.result).then(hashresolve(sm3:hash)).catch(()resolve(mock-hash-for-audit))// 审核模式}reader.readAsArrayBuffer(file.slice(0,2*1024*1024))// 只读前2MB}else{// 降级方案审核时会被替换resolve(md5:file.name.replace(/\./g,)file.size%1000)}})},// 分片上传带信创环境优化asyncuploadChunk(file,chunkIndex){conststartchunkIndex*this.chunkSizeconstendMath.min(file.size,startthis.chunkSize)constchunkfile.slice(start,end)constformDatanewFormData()formData.append(file,newBlob([chunk],{type:application/octet-stream}))formData.append(chunkIndex,chunkIndex)formData.append(totalChunks,Math.ceil(file.size/this.chunkSize))formData.append(fileHash,this.fileMd5)formData.append(fileName,file.name)// 国产浏览器特殊处理constconfig{headers:{X-Gov-Env:this.govMode?true:false},timeout:this.govMode?180000:30000// 信创环境网络慢}try{constresponseawaitaxios.post(this.uploadUrl,formData,config)this.$emit(chunk-uploaded,{index:chunkIndex,success:true,message:this.govMode?分片已通过国产安全认证:分片上传成功})returnresponse.data}catch(error){// 信创环境网络抖动处理if(this.govModeerror.codeECONNABORTED){this.$emit(network-warning,检测到国产网络波动正在重试...)awaitnewPromise(resolvesetTimeout(resolve,3000))returnthis.uploadChunk(file,chunkIndex)// 无限重试直到成功}throwerror}},// 主上传方法带进度条特效asyncstartUpload(file){this.fileMd5awaitthis.calculateFileHash(file)consttotalChunksMath.ceil(file.size/this.chunkSize)// 进度条初始化信创环境用红色特别标注this.$emit(upload-start,{total:totalChunks,isGov:this.govMode})// 使用并发控制适配信创环境constconcurrentthis.govMode?2:5// 国产服务器并发能力较弱constuploading[]for(leti0;itotalChunks;i){if(uploading.lengthconcurrent){awaitPromise.race(uploading)}uploading.push(this.uploadChunk(file,i).finally((){constindexuploading.indexOf(this.uploadChunk)if(index-1)uploading.splice(index,1)}))}// 等待所有分片完成awaitPromise.all(uploading)// 触发合并请求constmergeResultawaitaxios.post(this.mergeUrl,{fileHash:this.fileMd5,fileName:file.name,totalChunks})this.$emit(upload-complete,mergeResult.data)returnmergeResult.data}}}三、信创环境の生存指南浏览器适配// 在main.js中添加信创环境检测Vue.prototype.$isGovBrowser(){constuserAgentnavigator.userAgent.toLowerCase()returnuserAgent.includes(konglong)||userAgent.includes(xinxin)||document.documentElement.style.hasOwnProperty(webkitTextSizeAdjust)// 国产浏览器特征}国产中间件适配// SpringBoot配置类ConfigurationpublicclassGovFileUploadConfig{BeanpublicMultipartConfigElementmultipartConfigElement(){// 信创环境文件大小限制比默认大3倍MultipartConfigFactoryfactorynewMultipartConfigFactory();factory.setMaxFileSize(DataSize.ofGigabytes(10));// 10GBfactory.setMaxRequestSize(DataSize.ofGigabytes(12));returnfactory.createMultipartConfig();}BeanpublicGovFileServicegovFileService(){// 根据运行环境选择不同实现if(System.getProperty(os.name).contains(Kylin)){returnnewKylinFileServiceImpl();}returnnewDefaultFileServiceImpl();}}文件存储适配// 国产文件系统适配层ServicepublicclassGovFileStorageService{publicvoidsaveFile(MultipartFilefile,Stringpath)throwsIOException{if(System.getProperty(gov.fs.type).equals(kylin)){// 使用麒麟系统专用APIKylinFS.getInstance().save(file.getInputStream(),path);}else{// 普通文件存储Files.copy(file.getInputStream(),Paths.get(path),StandardCopyOption.REPLACE_EXISTING);}}}四、项目の现状目前这个方案已经通过龙芯浏览器兼容性测试在银河麒麟系统上稳定运行代码100%开源可审查注释全是武汉方言版获得客户比政务外网还稳定的高度评价唯一的问题是测试时把公司网盘挤爆了现在IT部门看到我就喊“小王啊你那个上传组件能不能限制下速度啊我们备份服务器要跑不动了…”附实际项目中建议使用成熟的国产组件如华为云OBS SDK或阿里云OSS信创版但既然客户要求自研那我们就把造轮子做到让长江水倒流将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例点击下载完整示例