【一个.NET程序员的悲喜交加前端搞定了后端求包养】各位道友好俺是山西某个人.NET程序员刚啃完《C#从入门到住院》就被客户按头要求搞个20G大文件上传下载系统。现在前端用Vue3原生JS硬怼出了半成品但后端还是个大坑啊求各路神仙带带弟弟或者收个关门弟子管饭就行 前端魔改代码Vue3 原生JS兼容IE8版// FileUploader.js兼容IE8的文件夹上传组件classOldSchoolUploader{constructor(options){this.chunks[];// 分片信息存储this.fileMd5;// 文件唯一标识this.isIE8!!window.ActiveXObject||ActiveXObjectinwindow;// 检测IE8this.isXinChuang/Lotus|RedLotus|QAX/.test(navigator.userAgent);// 检测国产浏览器// IE8专用XMLHttpRequest封装this.getIE8XHR(){try{returnnewActiveXObject(Msxml2.XMLHTTP);}catch(e){returnnewActiveXObject(Microsoft.XMLHTTP);}};// 计算文件MD5IE8用文件名大小当伪MD5this.calculateMD5(file,callback){if(this.isIE8){callback(${file.name}-${file.size}-${Date.now()});}else{// 正常MD5计算此处省略200行crypto-js代码console.log(正常浏览器MD5计算中...);}};}// 文件夹上传递归遍历FormData魔改uploadFolder(folder,parentPath){constfiles[];constdirReaderfolder.createReader();dirReader.readEntries(entries{entries.forEach(entry{if(entry.isFile){entry.file(file{files.push({path:${parentPath}/${entry.name},file});});}else{this.uploadFolder(entry,${parentPath}/${entry.name});}});// 国产浏览器降级处理if(this.isXinChuang){setTimeout(()this.processFiles(files),100);}else{Promise.all(files).then(()this.processFiles(files));}});}// 断点续传进度保存兼容IE8的localStorage降级方案saveProgress(fileMd5,progress){if(window.localStorage){localStorage.setItem(upload_${fileMd5},JSON.stringify(progress));}elseif(document.documentElement.addBehavior){// IE8及以下用userData存储conststoragedocument.createElement(div);storage.addBehavior(#default#userData);storage.setAttribute(progress,JSON.stringify(progress));storage.save(upload_${fileMd5});}}}// Vue3组件中使用示例exportdefault{methods:{handleFolderUpload(event){constfolderInputevent.target;if(folderInput.filesfolderInput.files[0]){constfolderfolderInput.files[0].webkitRelativePath?folderInput.files[0]// Chrome:{// IE/Edge模拟文件夹name:fake_folder,createReader:()({readEntries:callback{constentriesArray.from(folderInput.files).map(file({isFile:true,name:file.name,file:()newPromise(resolveresolve(file))}));callback(entries);}})};constuploadernewOldSchoolUploader();uploader.uploadFolder(folder);}}}} 血泪经验总结浏览器兼容性IE8用ActiveXObject替代fetch国产浏览器如龙芯需禁用某些现代API文件路径统一用/避免转义问题断点续传秘籍// 本地存储进度兼容IE8constsaveProgress(fileMd5,progress){if(window.localStorage){localStorage.setItem(upload_${fileMd5},JSON.stringify(progress));}else{// IE8降级方案document.cookieupload_${fileMd5}${encodeURIComponent(JSON.stringify(progress))};path/;}};加密传输方案前端用CryptoJS加密需引入polyfill支持IE8后端计划用Python的cryptography库解密传输走HTTPS本地用自签名证书 江湖救急现诚征各路大侠加入QQ群374992201进群领1-99元红包推荐项目拿50%提成求后端师傅收留Python/Java/Go都行可签卖身契需要完整项目代码的兄弟群里每天晚上8点准时发车附导师说项目要是能过请群主吃平遥牛肉管够 群内福利免费提供IE8兼容性测试工具包每周三晚代码接诊大佬在线改bug共享国产浏览器虚拟机环境龙芯/红莲花/奇安信PS群里还有从0到1搭建后端系列教程包括Python Flask/Django极速入门MySQL分片存储方案设计CentOS部署全流程手把手教学悄悄说群文件里有《如何让导师感动到哭的答辩技巧》.pdf设置框架安装.NET Framework 4.7.2https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472框架选择4.7.2添加3rd引用编译项目NOSQLNOSQL无需任何配置可直接访问页面进行测试SQL使用IIS大文件上传测试推荐使用IIS以获取更高性能。使用IIS Express小文件上传测试可以使用IIS Express创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例