老哥的大文件上传历险记各位同行兄弟好啊我是辽宁的一名资深(其实就是年纪大了) Java 程序员最近接了个外包项目要求可真是把我这老腰给闪了需求分析这活儿比东北虎还猛客户要的文件上传功能那叫一个全面啊20G大文件传输我硬盘才500G啊文件夹上传保留层级1000个分类这是要上天啊加密传输存储SM4、AES全要断点续传关浏览器、重启电脑都不能丢进度兼容IE9这年头还有人用IE9预算100元以内我早餐都不止这个价啊技术选型老哥我太难了前端要用原生JS实现不能用现成框架。后端是SpringBootVue3这组合倒是挺时髦。但是要兼容IE9这不是让我用5G网络给大哥大打电话吗部分代码实现能跑就行前端部分 (原生JS)// 文件上传核心逻辑 - 兼容IE9的魔改版functionuploadFile(file,relativePath){returnnewPromise((resolve,reject){// 为IE9准备的XHR对象constxhrwindow.XMLHttpRequest?newXMLHttpRequest():newActiveXObject(Microsoft.XMLHTTP);// 分片上传逻辑constchunkSize5*1024*1024;// 5MBletoffset0;// 读取文件分片constreadChunk(){constchunkfile.slice(offset,offsetchunkSize);// 加密分片 (伪代码)constencryptedChunkencryptChunk(chunk,SM4);constformDatanewFormData();formData.append(file,encryptedChunk);formData.append(fileName,file.name);formData.append(relativePath,relativePath);formData.append(totalSize,file.size);formData.append(chunkSize,chunkSize);formData.append(offset,offset);xhr.open(POST,/api/upload,true);xhr.setRequestHeader(X-Requested-With,XMLHttpRequest);xhr.onloadfunction(){if(xhr.status200){offsetchunkSize;if(offsetfile.size){readChunk();// 继续上传下一分片}else{resolve();// 上传完成}}else{reject(newError(上传失败));}};xhr.send(formData);};readChunk();});}// 文件夹上传 - 递归处理functionuploadFolder(entries,relativePath){returnPromise.all(Array.from(entries).map(entry{returnnewPromise((resolve){if(entry.isFile){entry.file(file{uploadFile(file,relativePath).then(resolve);});}elseif(entry.isDirectory){constdirReaderentry.createReader();dirReader.readEntries(entries{uploadFolder(entries,${relativePath}/${entry.name}).then(resolve);});}});}));}后端部分 (SpringBoot)RestControllerRequestMapping(/api)publicclassFileUploadController{PostMapping(/upload)publicResponseEntityuploadFile(RequestParam(file)MultipartFilefile,RequestParam(fileName)StringfileName,RequestParam(valuerelativePath,defaultValue)StringrelativePath,RequestParam(totalSize)longtotalSize,RequestParam(chunkSize)intchunkSize,RequestParam(offset)longoffset){try{// 解密文件分片 (伪代码)byte[]decryptedDatadecryptChunk(file.getBytes(),SM4);// 构建目标路径保留文件夹结构PathtargetPathPaths.get(uploads,relativePath,fileName);Files.createDirectories(targetPath.getParent());// 断点续传处理if(offset0){Files.write(targetPath,decryptedData);}else{Files.write(targetPath,decryptedData,StandardOpenOption.APPEND);}// 检查是否上传完成longuploadedSizeoffsetchunkSize;if(uploadedSizetotalSize){// 文件上传完成后的处理returnResponseEntity.ok().body(上传完成);}else{returnResponseEntity.ok().body(分片上传成功);}}catch(Exceptione){returnResponseEntity.status(500).body(上传失败: e.getMessage());}}// 文件夹下载接口GetMapping(/downloadFolder)publicvoiddownloadFolder(RequestParamStringfolderPath,HttpServletResponseresponse)throwsIOException{PathsourcePathPaths.get(uploads,folderPath);if(!Files.exists(sourcePath)){response.sendError(404,文件夹不存在);return;}response.setContentType(application/octet-stream);response.setHeader(Content-Disposition,attachment; filename\URLEncoder.encode(sourcePath.getFileName().toString(),UTF-8)\);// 非打包下载逐个文件传输try(OutputStreamoutresponse.getOutputStream()){Files.walk(sourcePath).filter(Files::isRegularFile).forEach(file-{try{// 保留相对路径StringrelativePathsourcePath.relativize(file).toString();// 写入文件信息头out.write((FILE:relativePath:Files.size(file)\n).getBytes());// 写入文件内容Files.copy(file,out);out.write(\n\n.getBytes());// 文件分隔符}catch(IOExceptione){thrownewUncheckedIOException(e);}});}}}老哥的心里话兄弟们啊100块钱预算要搞这么复杂的系统这不是难为我这资深程序员吗还要7×24小时技术支持这得加多少个鸡腿啊不过话说回来咱们程序员不就是喜欢挑战吗虽然这需求比东北的冬天还冷但谁让咱们是代码界的抗寒战士呢友情提示完整实现这个系统需要解决很多细节问题比如大文件分片上传的稳定性IE9兼容性的各种坑文件夹层级结构的准确保持加密性能优化断点续传的状态管理如果真要做成产品级质量建议增加预算至少加两个零考虑使用成熟的文件存储服务放弃IE9支持真心的欢迎加入我们的QQ群(374992201)一起讨论虽然红包可能没有99元那么大但技术交流绝对真诚安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。免费下载示例点击下载完整示例