企业官网建设流程全解析

一个大三狗的文件管理系统历险记

大家好，我是福州某校软件工程专业的大三狗，眼看毕业季来临，我决定做个"惊天地泣鬼神"的文件管理系统当毕业设计（主要是为了找工作时有东西可以吹）。

我的"异想天开"需求清单

1. 10G大文件上传：我的笔记本硬盘才512G啊喂！
2. 加密传输+存储：这得让我的课程设计看起来像国家安全局项目
3. 断点续传：关了浏览器还能接着传？重启电脑也不丢进度？
4. 文件夹上传保留结构：还要支持加密传输？（我开始怀疑自己是不是大三学生了）
5. 浏览器兼容：从IE8到国产浏览器一个都不能少
6. 7*24小时免费技术支持：我自己都天天熬夜改bug，哪来的24小时？
7. 免费源代码：毕竟预算=食堂饭卡余额

技术栈迷惑行为

• 前端：Vue3（写着写着就变成jQuery了）
• 后端：SpringBoot（Spring全家桶入门级选手）
• 数据库：MySQL（就会个CRUD）
• 存储：阿里云OSS（因为学生认证有优惠）
• 开发工具：IDEA（唯一用得顺手的）

编码翻车现场

前端部分 (原生JS实现)

// 大文件分片上传（10G？先试试10M吧）classBigFileUploader{constructor(){this.chunkSize=5*1024*1024;// 5MB一片this.retryCount=3;this.queue=[];this.paused=false;}// 选择文件后的处理handleFileSelect(e){constfile=e.target.files[0];if(!file){alert('老板，您倒是选个文件啊！');return;}if(file.size>10*1024*1024*1024){alert('10G？您电脑内存够吗？');return;}this.sliceAndUpload(file);}// 文件分片sliceAndUpload(file){consttotalChunks=Math.ceil(file.size/this.chunkSize);letuploadedChunks=this.loadProgress(file.name)||0;for(leti=uploadedChunks;i<totalChunks;i++){conststart=i*this.chunkSize;constend=Math.min(file.size,start+this.chunkSize);constchunk=file.slice(start,end);this.queue.push({chunk,chunkNumber:i,totalChunks,fileName:file.name,fileSize:file.size,retry:0});}this.processQueue();}// 上传队列处理processQueue(){if(this.paused||this.queue.length===0)return;constitem=this.queue.shift();this.uploadChunk(item).then(()=>{this.saveProgress(item.fileName,item.chunkNumber+1);this.processQueue();}).catch(err=>{console.error('上传失败:',err);if(item.retry<this.retryCount){item.retry++;this.queue.unshift(item);setTimeout(()=>this.processQueue(),1000);}else{alert(`文件${item.fileName}第${item.chunkNumber+1}片上传失败！`);}});}// 实际分片上传uploadChunk(item){returnnewPromise((resolve,reject)=>{constformData=newFormData();formData.append('file',item.chunk);formData.append('chunkNumber',item.chunkNumber);formData.append('totalChunks',item.totalChunks);formData.append('fileName',item.fileName);// 这里应该加上加密逻辑（但我还没学会）constxhr=newXMLHttpRequest();xhr.open('POST','/api/upload',true);xhr.onload=()=>{if(xhr.status===200){resolve(JSON.parse(xhr.responseText));}else{reject(newError('上传失败: '+xhr.statusText));}};xhr.onerror=()=>reject(newError('网络错误'));xhr.send(formData);});}// 保存进度到localStorage（不够持久？）saveProgress(fileName,uploadedChunks){constprogress=JSON.parse(localStorage.getItem('uploadProgress')||'{}');progress[fileName]=uploadedChunks;localStorage.setItem('uploadProgress',JSON.stringify(progress));}// 加载进度loadProgress(fileName){constprogress=JSON.parse(localStorage.getItem('uploadProgress')||'{}');returnprogress[fileName]||0;}}

后端部分 (SpringBoot)

@RestController@RequestMapping("/api")publicclassFileUploadController{@Value("${upload.dir}")privateStringuploadDir;@PostMapping("/upload")publicResponseEntityuploadChunk(@RequestParam("file")MultipartFilefile,@RequestParam("chunkNumber")intchunkNumber,@RequestParam("totalChunks")inttotalChunks,@RequestParam("fileName")StringfileName){try{// 创建临时目录StringtempDir=uploadDir+File.separator+"temp_"+fileName;Filedir=newFile(tempDir);if(!dir.exists()){dir.mkdirs();}// 保存分片文件StringchunkName=chunkNumber+".part";FilechunkFile=newFile(dir,chunkName);file.transferTo(chunkFile);// 如果是最后一片，合并文件if(chunkNumber==totalChunks-1){mergeFiles(fileName,tempDir,totalChunks);}returnResponseEntity.ok().body(Map.of("success",true,"message","分片上传成功","chunkNumber",chunkNumber));}catch(Exceptione){returnResponseEntity.status(500).body(Map.of("success",false,"message","分片上传失败: "+e.getMessage()));}}privatevoidmergeFiles(StringfileName,StringtempDir,inttotalChunks)throwsIOException{FileoutputFile=newFile(uploadDir,fileName);try(FileOutputStreamfos=newFileOutputStream(outputFile,true);BufferedOutputStreambos=newBufferedOutputStream(fos)){for(inti=0;i<totalChunks;i++){FilechunkFile=newFile(tempDir,i+".part");try(FileInputStreamfis=newFileInputStream(chunkFile);BufferedInputStreambis=newBufferedInputStream(fis)){byte[]buffer=newbyte[1024];intlen;while((len=bis.read(buffer))>0){bos.write(buffer,0,len);}}chunkFile.delete();// 删除已合并的分片}}// 删除临时目录newFile(tempDir).delete();}}

遇到的坑爹问题

1. IE8兼容：2023年了还要兼容IE8？我选择放弃治疗！
2. 10G文件上传：我的虚拟机内存才分配了4G…
3. 断点续传持久化：localStorage根本不够用啊！
4. 文件夹结构保持：前端获取不到完整路径，这题超纲了！
5. 加密功能：老师教过MD5算吗？（心虚）

我的卑微请求

有没有大神能：

1. 教我实现真正的断点续传持久化（IndexedDB？）
2. 帮我搞定文件夹结构上传
3. 教我简单的文件加密（别太复杂，我怕看不懂）
4. 给我的简历加点闪光点（最好能直接帮我写）

欢迎加QQ群374992201交流！新人加群送红包！（虽然可能就1块钱）

毕业答辩生存指南

1. 演示时只传小文件（避免当场卡死）
2. 重点讲设计思路（代码能跑就行）
3. 准备几个专业术语：“分布式存储”、“零信任安全模型”…
4. 遇到不会的问题就说"这个功能在下个版本规划中"

找工作求带！
有师兄师姐在招人的吗？我要求不高：

• 能养活自己
• 有电脑用
• 最好不用加班（做梦）

（附上我的专业技能：会Google、会复制粘贴、会重启电脑）

SQL示例

创建数据库

配置数据库连接

自动下载maven依赖

启动项目

启动成功

访问及测试

默认页面接口定义

在浏览器中访问

数据表中的数据

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

示例下载

下载完整示例