2023年XX月XX日 毕业设计攻坚日志 - 企业级文件管理系统开发实录
（关键词：10GB大文件上传/国产浏览器兼容/离线断点续传/文件夹加密传输）
晨间需求拆解
作为应届生的第一个"准商业级项目"，需同时满足：
- 学术严谨性（毕业答辩演示需求）
- 就业作品质量（需体现全栈能力）
- 特殊环境兼容（信创浏览器+IE8的杂交环境）
注：经测试龙芯浏览器对H5的支持度≈Chrome 60，红莲花浏览器存在诡异的localStorage加密机制
技术突围方案
核心代码实现
1. 跨浏览器文件夹采集 (Vue3+Polyfill)
// 统一文件夹选择方案functioninitFileSelector(){if(window.showDirectoryPicker){// Chrome 86+returnawaitwindow.showDirectoryPicker();}elseif(window.BlobBuilder){// IE10+降级方案returnlegacyDirectoryTraversal();}else{// Flash备用方案returninitFlashUploader('fileSelectorSWF');}}// 龙芯浏览器专用补丁if(/Loongson/.test(navigator.userAgent)){Document.prototype.showDirectoryPicker=async()=>[].concat(inputElement.webkitEntries);}2. 离线断点续传存储设计
// 双持久化策略（IndexedDB + localStorage）classUploadRecorder{constructor(){this.db=newDexie('UploadDB');this.db.version(1).stores({chunks:'++id, &chunkId, status, timestamp'});}asyncsaveProgress(uploadId,chunkMap){localStorage.setItem(`upload_${uploadId}`,JSON.stringify(chunkMap));awaitthis.db.chunks.bulkPut(Object.entries(chunkMap).map(([chunkId,status])=>({chunkId:`${uploadId}_${chunkId}`,status,timestamp:Date.now()})));}}3. PHP端国密加密处理
// SM4加密分片接收示例functionreceiveChunk(){$encrypted=file_get_contents('php://input');$iv=substr($encrypted,0,16);$ciphertext=substr($encrypted,16);$sm4=newSM4();$plain=$sm4->decrypt($ciphertext,SM4_KEY,$iv);file_put_contents(OSS_PATH,$plain,FILE_APPEND);}信创浏览器兼容表
| 浏览器类型 | 可用API | 需注入的Polyfill |
|---|---|---|
| 龙芯浏览器 | 部分FileSystem API | webkitRelativePath模拟 |
| 红莲花浏览器 | 阉割版IndexedDB | localStorage代理 |
| 奇安信浏览器 | 禁用WebWorker | 同步加密计算方案 |
毕业设计亮点设计
学术创新点
- 基于LSM树的断点信息存储算法（可写入论文章节）
- 跨浏览器文件夹结构编码方案（答辩演示重点）
演示技巧
// 故意触发断网演示断点续传document.getElementById('demoBtn').onclick=()=>{navigator.connection.dispatchEvent(newEvent('offline'));setTimeout(()=>alert("正在从断点恢复..."),3000);};论文图表素材
避坑指南
IE8的魔幻现实主义
// 检测IE8的终极方案constisIE8=!document.addEventListener&&!!document.documentMode;// ActiveX上传控件初始化的正确姿势newActiveXObject('ShockwaveFlash.ShockwaveFlash').LoadMovie(0,'uploader.swf');文件夹结构还原技巧
// 根据webkitRelativePath重建目录functionrebuildPath($uploadId){$structure=json_decode($redis->get("dir:$uploadId"),true);foreach($structureas$virtualPath=>$ossPath){$realPath=OSS_ROOT.dirname($virtualPath);if(!is_dir($realPath))mkdir($realPath,0777,true);rename($tmpPath,OSS_ROOT.$virtualPath);}}
工程化建议
- 使用
webpack-ie8-loader处理Vue3的兼容性问题 - 在阿里云OSS控制台开启极速同步模式提升分片合并速度
- 答辩PPT中增加技术对比雷达图（与传统FTP方案对比）
注：完整代码已托管至课题组GitLab，含自动化测试脚本（可模拟断网/断电场景）
今日进展：成功在龙芯架构下实现5GB文件夹上传，明日重点攻克红莲花浏览器的内存泄漏问题。
致谢：特别感谢QQ群@深圳李工提供的SM4加密方案，该同学就职于某信息安全大厂，表示愿意提供技术推荐信。
安装环境
PHP:7.2.14
调整块大小
NOSQL
NOSQL不需要任何配置，可以直接访问测试
SQL
创建数据库
您可以直接复制脚本进行创建
配置数据库连接
安装依赖
访问页面进行测试
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
免费下载示例
点击下载完整示例
