“救命啊毕业设计要翻车了”作为福州某高校计算机系最会摸鱼的大三咸鱼最近被毕业设计逼得差点把键盘啃了。导师让我做个文件管理系统要求支持10G大文件上传、断点续传、文件夹层级保留、全浏览器兼容…最要命的是必须用原生JS实现Vue3你礼貌吗。第一章前端の渡劫WebUploader改造记// 魔改后的WebUploader核心代码兼容IE8的Blob切片functionIE8CompatibleSlice(file,start,end){if(window.FileReaderwindow.Blob.prototype.slice){returnfile.slice(start,end);}// IE8特供版用Flash模拟切片别问问就是玄学returnflashSlicer.slice(file,start,end);}// 兼容所有浏览器的MD5计算包括IE6functioncalculateMD5(fileChunk){if(window.cryptowindow.crypto.subtle){returncrypto.subtle.digest(SHA-256,fileChunk);}// 兼容IE的ActiveX方案try{varxmlnewActiveXObject(Microsoft.XMLDOM);// ...此处省略500行兼容代码}catch(e){alert(您使用的浏览器可能来自上个世纪建议升级到IE9);}}文件夹上传黑科技// 递归读取文件夹兼容IE10以下functionreadFolderIECompatible(entry,callback){if(entry.isFile){entry.file(function(file){callback([file]);});}else{vardirReaderentry.createReader();dirReader.readEntries(function(entries){varfiles[];for(vari0;ientries.length;i){readFolderIECompatible(entries[i],function(subFiles){filesfiles.concat(subFiles);});}callback(files);// 异步地狱警告});}}第二章后端の受难SpringBoot控制器防IE8攻击版RestControllerRequestMapping(/upload)publicclassUploadController{PostMapping(/chunk)publicResponseEntityuploadChunk(RequestParam(file)MultipartFilefile,RequestParam(chunkNumber)intchunkNumber,RequestParam(totalChunks)inttotalChunks,RequestParam(identifier)Stringidentifier,// 兼容IE8的奇怪参数名RequestParam(valuefileName,requiredfalse)Stringie8FileName){try{// 文件存储路径直接塞服务器硬盘Stringpath/var/uploads/identifier/chunkNumber;// 防IE8乱码文件名处理StringfileNameie8FileName!null?newString(ie8FileName.getBytes(ISO-8859-1),UTF-8):file.getOriginalFilename();// 保存分片省略异常处理Files.write(Paths.get(path),file.getBytes());returnResponseEntity.ok(分片chunkNumber接收成功);}catch(Exceptione){returnResponseEntity.status(500).body(IE8又出幺蛾子了e.getMessage());}}}MySQL断点续传表设计CREATETABLEupload_progress(idbigint(20)NOTNULLAUTO_INCREMENT,file_idvarchar(64)NOTNULLCOMMENT文件唯一标识,chunk_numberint(11)NOTNULLCOMMENT已上传分片序号,total_chunksint(11)DEFAULTNULLCOMMENT总分片数,browser_typevarchar(50)DEFAULTNULLCOMMENT检测到的浏览器类型,last_updatetimestampNOTNULLDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,PRIMARYKEY(id),UNIQUEKEYidx_file_id(file_id))ENGINEInnoDBDEFAULTCHARSETutf8mb4COMMENT兼容IE8的上传进度表;第三章兼容性の炼狱IE8专属补丁包// 检测是否为IE8最可靠的检测方式functionisIE8(){return!!document.all!document.addEventListenerwindow.XMLHttpRequest!window.XDomainRequest;}// IE8专用AJAX实现functionie8Ajax(url,data,callback){varxhrnewActiveXObject(Microsoft.XMLHTTP);xhr.onreadystatechangefunction(){if(xhr.readyState4){callback(xhr.responseText);}};xhr.open(POST,url,true);xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);xhr.send(data);}第四章生存指南测试矩阵IE8/9 Windows 7Chrome 45某国企指定浏览器龙芯浏览器在虚拟机里跑奇安信浏览器需要企业账号必备工具IE Tester模拟IE6-11Postman测试API速效救心丸测试IE8时必备求职彩蛋// 在控制台输入这个可以查看隐藏的求职信息console.log(%c福州IT公司招聘啦,color: red; font-size: 24px;);console.log(联系QQ374992201加群领红包内推);最终生存建议千万别在IE8上测试加密功能会让你怀疑人生文件夹上传功能建议用Flash作为备用方案是的2023年还在用Flash遇到问题赶紧加群374992201群主会发红包安抚你毕业设计演示前记得备份三份分别存在U盘、网盘和邮箱附本代码已在IE8/Chrome/Firefox/龙芯浏览器上成功跑通但不对任何生产环境问题负责毕竟我连毕业设计能不能过都不知道…SQL示例创建数据库配置数据库连接自动下载maven依赖启动项目启动成功访问及测试默认页面接口定义在浏览器中访问数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。示例下载下载完整示例