毕业设计大作战: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;五、血泪教训与解决方案
IE8兼容性问题:
- 发现:WebUploader在IE8下无法选择文件夹
- 解决方案:改用Flash版本+自定义文件选择器
大文件内存溢出:
- 发现:PHP默认上传大小限制2G
- 解决方案:修改php.ini:
upload_max_filesize = 12G post_max_size = 13G max_execution_time = 3600
文件夹结构丢失:
- 发现:前端传过去的文件列表是平的
- 解决方案:在前端构建文件树,后端解析时重建目录结构
加密传输性能问题:
- 发现:AES加密10G文件要5分钟
- 解决方案:只加密文件元数据,分片加密(每片单独加密)
六、最终成果展示
经过一个月的日夜奋战,我的系统终于可以:
- 在IE8上流畅上传(虽然慢得像蜗牛)
- 支持10G文件秒传(实际取决于网速)
- 断点续传准确率99.9%(剩下0.1%是手滑点了取消)
- 文件夹结构完美保留(连空格和特殊字符都不放过)
(突然收到面试通知:“同学,我们看到你做的文件上传系统,想来面试下?”)
七、求职求助
各位师哥师姐,眼看就要毕业了,现在急需:
- 内推机会(前端/全栈岗位)
- 面试技巧指导(特别是八股文)
- 简历修改建议(我的简历现在像代码注释)
欢迎加QQ群:374992201(新人进群领红包,还能看我直播改BUG!)
(最后附上系统截图:一个丑但能用的上传界面,右上角显示"兼容IE8"的绿色小标)
后记:写完这篇血泪史,发现头发又少了几根…但想到能帮到同样挣扎的毕业生,值了!如果你也在做类似项目,欢迎交流,咱们一起对抗这该死的毕业设计!
安装环境
PHP:7.2.14
调整块大小
NOSQL
NOSQL不需要任何配置,可以直接访问测试
SQL
创建数据库
您可以直接复制脚本进行创建
配置数据库连接
安装依赖
访问页面进行测试
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度,在关闭浏览器,刷新浏览器后进行不丢失,仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构,同样支持进度信息离线保存,刷新页面,关闭页面,重启系统不丢失上传进度。
免费下载示例
点击下载完整示例