核心内容摘要
外瑞古德漫画：不止于“好”，一场关于创意与笑声的奇幻旅程
《码农的10G文件上传历险记》
毕业设计之痛——当菜鸟遇上WebUploader“老师说要支持10G文件上传我们系服务器硬盘总共才500G啊”技术选型血泪史// 我的前端技术栈全是坑constmySkills{framework:Vue3,// 只会用cli创建项目nativeJS:true,// 被迫的libraries:[WebUploader,// 百度出品必属...坑品CryptoJS,// 加密用希望别把文件加密成乱码localStorage,// 断点续传的救命稻草IE8Hack,// 专门伺候老爷机的黑科技],backend:PHP,// 因为只会echo Hello WorldIDE:Zend Studio,// 界面丑得让我想哭debugTools:[console.log,// 永远的神alert,// IE8调试必备佛祖保佑,// 最重要的调试工具]}
大文件上传之战——5MB一次的生死较量前端核心代码带血泪注释版// 大文件分片上传兼容IE8的地狱级写法functionuploadBigFile(file){// IE8特供处理感谢比尔盖茨让我失业if(!window.Blob){alert(检测到您在使用上古浏览器建议升级到IE9或...换个电脑);return;}// 分片大小5MB学校网速传10G要传到毕业典礼constCHUNK_SIZE5*1024*1024;constchunksMath.ceil(file.size/CHUNK_SIZE);// 断点续传黑科技localStorage IndexedDB双保险constresumeKeyupload_${md5(file.namefile.size)};letuploadedlocalStorage.getItem(resumeKey)||0;// 国产浏览器特供补丁红莲花/麒麟/360极速...if(/RedLotus|QiLin|360EE/.test(navigator.userAgent)){alert(检测到您在使用爱国浏览器自动降级为2MB分片);CHUNK_SIZE2*1024*1024;}// 开始上传心跳加速for(letiuploaded;ichunks;i){conststarti*CHUNK_SIZE;constendMath.min(file.size,startCHUNK_SIZE);constchunkfile.slice(start,end);// 加密分片密码学是抄CSDN的constencryptedChunkCryptoJS.AES.encrypt(chunk.toString(),山西刀削面天下第一,// 密钥{iv:毕业设计要凉凉}// 向量).toString();// 实际上传此处应有紧张的音乐if(!uploadChunk(encryptedChunk,i,chunks,file.name)){// 失败保存进度希望能活到下次继续localStorage.setItem(resumeKey,i);thrownewError(上传失败可能是校长在下载电影);}}// 上传完成放烟花庆祝localStorage.removeItem(resumeKey);alert(上传成功学分
0.
;}// 文件夹上传递归噩梦functionuploadFolder(folder){// 获取相对路径IE8特供黑科技constpathfolder.webkitRelativePath||magicGetPath(folder);// 神秘函数// 遍历文件夹内容兼容各种奇葩浏览器constfilesfolder.files||Array.from(folder.children).filter(itemiteminstanceofFile);files.forEach(file{if(file.size10*1024*1024*
{if(confirm(文件太大真的要上传吗)){uploadBigFile(file);}}else{uploadFile(file,path);// 普通文件直接传}});}// IE8获取路径黑魔法functionmagicGetPath(file){// 此处省略100行兼容代码return神秘路径/file.name;}
PHP后端历险记——从Hello World到文件加密PHP后端核心代码带求生欲注释版10*1024*1024*
{die(json_encode([error文件太大建议删点校长的爱情动作片]));}// 解密处理密码要和前端对上$encryptedDatafile_get_contents($_FILES[file][tmp_name]);if($_POST[encrypted]true){$datadecrypt($encryptedData,山西刀削面天下第一,毕业设计要凉凉);}else{$data$encryptedData;}// 安全检查防止校长的炒股软件被覆盖$pathstr_replace(..,,$_POST[path]);$savePath/uploads/.$path;// 创建目录755权限是抄的if(!file_exists(dirname($savePath))){mkdir(dirname($savePath),0755,true);}// 保存文件求求你别出错if(file_put_contents($savePath,$data)false){die(json_encode([error写入失败可能是磁盘满了]));}// 加密存储再来一层保险if($_POST[encrypt_store]true){$encryptedencrypt($data,老陈醋加密,学号后六位);file_put_contents($savePath..enc,$encrypted);}echojson_encode([successtrue]);}// 加密函数从某个神秘论坛抄的functionencrypt($data,$key,$iv){// 此处省略50行让人看不懂的代码return$data;// 假装加密成功}// 断点续传检查接口functioncheckProgress(){$fileMd5$_GET[file_md5];$totalSize$_GET[total_size];// 查询数据库现学的PDO$dbnewPDO(mysql:hostlocalhost;dbnameupload,root,
;$stmt$db-prepare(SELECT progress FROM uploads WHERE file_md5 ?);$stmt-execute([$fileMd5]);$result$stmt-fetch();echojson_encode([progress$result?$result[progress]:0]);}?
阿里云OSS对接奇遇记“什么OSS的PHP SDK不支持IE8”OSS上传兼容方案// 前端直传OSS方案绕不开的兼容问题functionuploadToOSS(file,path){// 获取STS临时凭证学校服务器每天重启三次fetch(/api/oss-token).then(resres.json()).then(data{// 初始化WebUploader百度救我constuploadernewWebUploader.create({// 此处省略20个参数server:https://oss-cn-shanghai.aliyuncs.com,formData:{OSSAccessKeyId:data.accessKeyId,policy:data.policy,Signature:data.signature,key:pathfile.name,success_action_status:200,},// IE8特供配置prepareNextFile:true,chunked:true,chunkSize:5*1024*1024,threads:3,// 并发数学校网络开多了会爆炸});// 添加文件希望别报错uploader.addFile(file);// 上传进度心跳显示器uploader.on(uploadProgress,function(file,percentage){console.log(上传进度,percentage*100%);localStorage.setItem(oss_progress,percentage);});// 上传完成可以松口气uploader.on(uploadSuccess,function(file){alert(上传成功学分
0.
;});// 上传失败又要熬夜uploader.on(uploadError,function(file,reason){alert(上传失败reason);});}).catch(err{console.error(获取OSS token失败,err);alert(获取凭证失败可能是校长在重启服务器);});}
毕业答辩生存指南“演示时千万别用IE8别问我是怎么知道的…”答辩保命三件套演示预案正常版Chrome/Firefox降级版IE11/Edge灾难版IE8准备随时切换话术准备- 当上传卡住时 这是特意演示的断点续传功能请看我现在刷新页面... - 当IE8崩溃时 这充分证明了兼容IE8的技术挑战性我的解决方案是... - 当老师提问时 这个问题涉及到计算机基础理论的深入应用...(然后开始背概念)应急方案// 终极保命代码functionemergencyDemo(){if(isIE8()){alert(检测到您在使用IE8自动切换到演示视频模式);window.location.hrefdemo-video.html;}}
求职路上的骚操作“简历上写’精通文件上传’会不会太low”简历包装艺术## 项目经验 **超级文件管理系统毕业设计** - 实现了基于Web的**分布式大文件传输解决方案**其实就是分片上传 - 开发了**多层次安全加密传输协议**AES加密base64编码 - 解决了**跨浏览器兼容性难题**IE8都能跑还有啥不能跑 - **性能优化**将10G文件上传时间从∞缩短到24小时网速限制面试话术宝典- 当被问及技术难点 最大的挑战是保证在极端网络环境下的传输可靠性 其实就是学校网络老断 - 当被问及项目收获 深刻理解了文件传输协议的设计原理 被坑多了自然就懂了 - 当被要求现场写代码 我可以给您演示我的毕业设计作品 赶紧打开提前准备好的演示页面后记来自山西码农的终极忠告终于做完了这个要命的毕业设计
总结几条血泪经验技术选型要谨慎说支持IE8的库都是骗人的百度开源组件文档可能比山西老陈醋还酸爽开发心态要平和while(bug.exists()){drink(老陈醋);if(bug.stillExists()){cry();}}求职要主动“师兄师姐们求内推啊我不仅能写代码还能讲山西笑话活跃办公室气氛”最后送大家一句我们山西程序员的至理名言“编码如同和面水多了加面面多了加水总有一天能和成”PS那个QQ群真不是我建的但如果你找到了工作记得请我吃刀削面啊安装环境PHP:
7.
14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。
免费下载示例点击下载完整示例