企业官网建设流程全解析

毕业设计大作战：10G文件上传系统の逆袭之路

（推了推黑框眼镜，对着电脑屏幕露出邪魅一笑）

各位老铁们好！我是河北某不知名高校软件工程专业的"秃头"大三狗，此刻正抱着我的ThinkPad在实验室里瑟瑟发抖——毕竟要搞个支持10G文件上传的毕业设计，还要兼容IE8这种上古神器，这难度堪比让食堂阿姨给我打肉时不手抖啊！

一、需求分析：老板说要上天

当导师把需求拍在我脸上时，我差点以为他在念《葵花宝典》：

• 支持10G大文件上传（这得传到猴年马月？）
• 必须兼容IE8到Chrome最新版（包括龙芯浏览器这种国货之光）
• 要有文件夹上传并保留层级结构（这得递归到天荒地老）
• 断点续传要支持重启电脑（难道要在我电脑里装个监控？）
• 前后端都要加密（这是要防间谍还是防我自己？）
• 还要免费技术支持（白嫖党狂喜.jpg）

（突然收到师哥消息：“小老弟，你这需求够写篇论文了”）

二、技术选型：八国联军大混战

经过三天三夜的灵魂拷问，最终选定以下技术栈：

• 前端：Vue3 + 原生JS（毕竟要兼容IE8，Vue2都嫌新）
• 上传组件：WebUploader（百度开源的，虽然文档像天书）
• 后端：PHP（别问，问就是导师要求的）
• 数据库：MySQL（存储文件碎片信息）
• 存储：阿里云OSS（毕竟白嫖学生套餐香）

（突然想起实验室那台IE9的Win7老古董，默默给WebUploader点了个蜡）

三、前端实现：和IE8斗智斗勇

1. 文件选择器改造（兼容IE8的魔法）

// 兼容IE8的文件选择器（魔法攻击）functioncreateFileInput(){constinput=document.createElement('input');input.type='file';input.multiple=true;// 支持多选input.webkitdirectory=true;// Chrome文件夹上传input.directory=true;// Firefox文件夹上传// IE8特殊处理（玄学代码）if(navigator.userAgent.indexOf('MSIE 8')>-1){input.onchange=function(){constfiles=[];for(leti=0;i<this.files.length;i++){files.push(this.files[i]);}handleFiles(files);// 自定义处理函数};}else{// 现代浏览器处理input.addEventListener('change',()=>{handleFilesWithWebUploader(input.files);});}returninput;}

2. WebUploader配置（调参地狱）

// 初始化WebUploader（配置项多到怀疑人生）constuploader=WebUploader.create({auto:false,// 手动上传swf:'/static/Uploader.swf',// IE8需要Flashserver:'/api/upload',// PHP接口pick:'#filePicker',// 选择按钮chunked:true,// 分片上传chunkSize:5*1024*1024,// 每片5MBthreads:3,// 并发数formData:{// 加密参数（这里用简单AES示例）token:CryptoJS.AES.encrypt('user_token','secret_key').toString(),fileId:generateFileId()// 生成唯一ID},// 兼容文件夹上传accept:{title:'Files',extensions:'*',mimeTypes:'*'}});// 监听文件添加（处理文件夹结构）uploader.on('filesQueued',function(files){// 这里要解析文件夹层级结构（递归警告）constfileTree=buildFileTree(files);console.log('文件树结构:',fileTree);});

3. 断点续传实现（localStorage大法）

// 保存上传进度（即使浏览器崩溃也能恢复）functionsaveProgress(fileId,uploadedSize){try{constprogress={fileId:fileId,uploaded:uploadedSize,timestamp:newDate().getTime()};localStorage.setItem(`upload_${fileId}`,JSON.stringify(progress));}catch(e){console.error('localStorage保存失败:',e);// IE8可能不支持localStorage，降级处理if(window.ActiveXObject){// 使用IE的用户数据持久化（上古技术）saveToUserData(fileId,uploadedSize);}}}// 从存储恢复进度functionrestoreProgress(fileId){try{constkey=`upload_${fileId}`;constdata=localStorage.getItem(key);if(data){returnJSON.parse(data);}}catch(e){console.error('localStorage读取失败:',e);}returnnull;}

四、后端实现：PHP大战OSS

1. 文件分片接收（PHP版切水果）

403,'msg'=>'认证失败']));}$fileId=$_POST['fileId']??'';$chunkIndex=$_POST['chunkIndex']??0;$chunksTotal=$_POST['chunksTotal']??1;// 临时目录（确保有写入权限）$tempDir='/tmp/uploads/'.substr($fileId,0,2);if(!file_exists($tempDir)){mkdir($tempDir,0777,true);}// 保存分片文件$chunkPath=$tempDir.'/'.$chunkIndex;move_uploaded_file($_FILES['file']['tmp_name'],$chunkPath);// 记录已接收的分片（存在MySQL里）recordChunkReceived($fileId,$chunkIndex,$chunksTotal);// 检查是否所有分片都已上传if(checkAllChunksReceived($fileId,$chunksTotal)){// 合并文件（这里调用OSS SDK）mergeFileToOSS($fileId,$tempDir);// 清理临时文件deleteTempFiles($tempDir);}echojson_encode(['code'=>200,'msg'=>'分片接收成功']);?>

2. MySQL表设计（简单示例）

CREATETABLE`upload_progress`(`id`int(11)NOTNULLAUTO_INCREMENT,`file_id`varchar(64)NOTNULLCOMMENT'文件唯一ID',`file_name`varchar(255)NOTNULLCOMMENT'文件名',`file_size`bigint(20)NOTNULLCOMMENT'文件总大小',`uploaded_size`bigint(20)NOTNULLDEFAULT'0'COMMENT'已上传大小',`chunks_total`int(11)NOTNULLCOMMENT'总分片数',`chunks_uploaded`int(11)NOTNULLDEFAULT'0'COMMENT'已上传分片数',`status`tinyint(1)NOTNULLDEFAULT'0'COMMENT'0-上传中 1-已完成 2-失败',`create_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMP,`update_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,PRIMARYKEY(`id`),UNIQUEKEY`idx_file_id`(`file_id`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;

五、血泪教训与解决方案

1. IE8兼容性问题：

   • 发现：WebUploader在IE8下无法选择文件夹
   • 解决方案：改用Flash版本+自定义文件选择器

2. 大文件内存溢出：

   • 发现：PHP默认上传大小限制2G
   • 解决方案：修改php.ini：

     upload_max_filesize = 12G post_max_size = 13G max_execution_time = 3600

3. 文件夹结构丢失：

   • 发现：前端传过去的文件列表是平的
   • 解决方案：在前端构建文件树，后端解析时重建目录结构

4. 加密传输性能问题：

   • 发现：AES加密10G文件要5分钟
   • 解决方案：只加密文件元数据，分片加密（每片单独加密）

六、最终成果展示

经过一个月的日夜奋战，我的系统终于可以：

• 在IE8上流畅上传（虽然慢得像蜗牛）
• 支持10G文件秒传（实际取决于网速）
• 断点续传准确率99.9%（剩下0.1%是手滑点了取消）
• 文件夹结构完美保留（连空格和特殊字符都不放过）

（突然收到面试通知：“同学，我们看到你做的文件上传系统，想来面试下？”）

七、求职求助

各位师哥师姐，眼看就要毕业了，现在急需：

1. 内推机会（前端/全栈岗位）
2. 面试技巧指导（特别是八股文）
3. 简历修改建议（我的简历现在像代码注释）

欢迎加QQ群：374992201（新人进群领红包，还能看我直播改BUG！）

（最后附上系统截图：一个丑但能用的上传界面，右上角显示"兼容IE8"的绿色小标）

后记：写完这篇血泪史，发现头发又少了几根…但想到能帮到同样挣扎的毕业生，值了！如果你也在做类似项目，欢迎交流，咱们一起对抗这该死的毕业设计！

安装环境

PHP:7.2.14

调整块大小

NOSQL

NOSQL不需要任何配置，可以直接访问测试

SQL

创建数据库

您可以直接复制脚本进行创建

配置数据库连接

安装依赖

访问页面进行测试

数据表中的数据

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

免费下载示例

点击下载完整示例