湖南省建设资源人才网站上海网站建设导航

湖南省建设资源人才网站,上海网站建设导航,建立一个网站平台需要多少钱,wordpress 域名插件大文件上传系统开发全攻略#xff08;兼容IE8的Vue3WebForm实现#xff09; 项目背景 兄弟们#xff0c;这次接了个硬骨头活儿#xff01;客户要我们实现一个支持20G文件上传的系统#xff0c;还要兼容IE8这种古董浏览器#xff0c;预算只有100块#xff01;不过别慌兼容IE8的Vue3WebForm实现项目背景兄弟们这次接了个硬骨头活儿客户要我们实现一个支持20G文件上传的系统还要兼容IE8这种古董浏览器预算只有100块不过别慌咱们程序员不就是喜欢挑战不可能吗今天就带大家一步步搞定这个项目。技术选型分析首先梳理下需求前端Vue3 CLI 原生JS因为要兼容IE8后端ASP.NET WebFormSQL Server功能大文件/文件夹上传下载、加密传输、断点续传特殊要求兼容IE8、保留文件夹结构、非打包下载为什么不用WebUploader虽然它是个好库但IE8兼容性成问题而且我们要完全控制代码所以决定原生JS实现。前端实现兼容IE8版1. 文件选择组件兼容IE8export default { data() { return { fileList: [], chunkSize: 5 * 1024 * 1024, // 5MB分片 isIE8: false } }, mounted() { // 检测IE8 this.isIE8 this.detectIE8(); // 恢复上传进度 this.restoreUploadProgress(); }, methods: { detectIE8() { const ua window.navigator.userAgent; return ua.indexOf(MSIE 8.0) 0 || ua.indexOf(MSIE 7.0) 0; }, triggerFileInput() { document.getElementById(fileInput).click(); }, triggerFolderInput() { if (this.isIE8) { alert(IE8不支持文件夹上传请使用现代浏览器或单独上传文件); return; } document.getElementById(folderInput).click(); }, } }2. IE8兼容性处理由于IE8不支持FormData、Blob等现代API我们需要做兼容处理// 在main.js或单独的文件中添加IE8兼容代码if(detectIE8()){// 加载必要的polyfillloadScript(https://cdn.jsdelivr.net/npm/ie8-polyfill1.0.0/dist/ie8-polyfill.min.js);// 重写XMLHttpRequest以支持大文件上传constoriginalXHRwindow.XMLHttpRequest;window.XMLHttpRequestfunction(){constxhrneworiginalXHR();constoriginalSendxhr.send;xhr.sendfunction(data){if(datainstanceofFormData){// IE8 FormData处理constformdocument.createElement(form);form.style.displaynone;document.body.appendChild(form);// 正常发送originalSend.call(xhr,data);};returnxhr;};}后端实现ASP.NET WebForm1. 文件上传处理C#// FileHandler.ashx.cspublicclassFileHandler:IHttpHandler{privatereadonlystringstoragePathE:\UploadedFiles;privatereadonlystringconnectionStringYour_SQL_Server_Connection_String;publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{stringactioncontext.Request[action]??context.Request.PathInfo.Trim(/);switch(action.ToLower()){casegetsign:HandleGetSign(context);break;caseuploadchunk:HandleUploadChunk(context);break;casemerge:HandleMerge(context);break;casedownload:HandleDownload(context);break;default:context.Response.Write({\success\:false,\message\:\Invalid action\});break;}}catch(Exceptionex){}}}2. 数据库表设计SQL Server-- 上传主表CREATETABLEUploads(IdINTIDENTITY(1,1)PRIMARYKEY,UploadId NVARCHAR(50)NOTNULLUNIQUE,FileName NVARCHAR(255)NOTNULL,FullPath NVARCHAR(1000)NOTNULL,FileSizeBIGINTNOTNULL,ChunksINTNOTNULL,StatusNVARCHAR(20)NOTNULLDEFAULTuploading,CreatedDateDATETIMENOTNULL,CompletedDateDATETIMENULL,UserId NVARCHAR(50)NULL-- 如果有用户系统);-- 上传分片表CREATETABLEUploadChunks(IdINTIDENTITY(1,1)PRIMARYKEY,UploadId NVARCHAR(50)NOTNULL,ChunkIndexINTNOTNULL,StatusNVARCHAR(20)NOTNULLDEFAULTpending,CreatedDateDATETIMENOTNULL,UpdateDateDATETIMENOTNULL,FOREIGNKEY(UploadId)REFERENCESUploads(UploadId));-- 文件元数据表CREATETABLEFiles(IdINTIDENTITY(1,1)PRIMARYKEY,FilePath NVARCHAR(1000)NOTNULLUNIQUE,FileName NVARCHAR(255)NOTNULL,FileSizeBIGINTNOTNULL,UploadDateDATETIMENOTNULLDEFAULTGETDATE(),LastModifiedDATETIMENOTNULLDEFAULTGETDATE(),IsDirectoryBITNOTNULLDEFAULT0,ParentPath NVARCHAR(1000)NULL,UserId NVARCHAR(50)NULL);加密传输和存储实现1. 前端加密使用AES简化版// crypto.js - 简化版AES加密实际项目应该使用更完整的库functionencryptData(data,password){// 实际项目中应该使用Web Crypto API或引入crypto-js等库// 这里只是示例实际IE8兼容的加密需要更复杂的实现// 简单示例使用XOR加密实际项目中不要这样用if(typeofdatastring){letresult;for(leti0;idata.length;i){resultString.fromCharCode(data.charCodeAt(i)^password.charCodeAt(i%password.length));}returnresult;}returndata;}2. 后端解密和存储加密// 在FileHandler.ashx.cs中添加privatebyte[]DecryptData(byte[]data,stringpassword){// 实际项目应该使用AES等强加密算法// 这里只是示例与前端的XOR加密对应byte[]resultnewbyte[data.Length];for(inti0;idata.Length;i){result[i](byte)(data[i]^password[i%password.Length]);}returnresult;}部署和配置1. IIS配置要点上传大小限制在web.config中添加超时设置在IIS管理器中应用程序池 - 高级设置 - 闲置超时(分钟) 设为 0不超时连接超时设为较大值2. 前端构建配置在vue.config.js中module.exports{publicPath:./,// 相对路径outputDir:dist,assetsDir:static,configureWebpack:{target:[web,es5],// 兼容IE8module:{rules:[{test:/\.js$/,exclude:/node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,use:{loader:babel-loader,options:{presets:[[babel/preset-env,{useBuiltIns:usage,corejs:3,targets:{ie:8}}]]}}}]}},chainWebpack:config{// 兼容IE8的polyfillconfig.entry(main).add(babel-polyfill)}}完整系统架构图客户端 (IE8/现代浏览器) ├─ Vue3前端 (兼容IE8) │ ├─ 文件选择组件 │ ├─ 分片上传逻辑 │ ├─ 进度保存与恢复 │ └─ 加密处理 │ └─ 原生JS后备方案 ├─ IE8兼容的表单提交 ├─ iframe上传处理 └─ 进度轮询机制 服务器 (IIS) ├─ ASP.NET WebForm后端 │ ├─ 文件分片接收 │ ├─ 数据库记录 │ └─ 合并处理 │ └─ 文件存储系统 ├─ 临时分片存储 (E:\temp) └─ 正式文件存储 (E:\UploadedFiles) 数据库 (SQL Server) ├─ Uploads表 (上传记录) ├─ UploadChunks表 (分片记录) └─ Files表 (文件元数据)开发文档要点系统功能大文件分片上传5MB/片文件夹结构保留断点续传加密传输和存储多浏览器兼容API接口/api/file/getSign- 获取上传签名/api/file/uploadChunk- 上传分片/api/file/merge- 合并文件/api/file/download- 下载文件部署说明IIS配置要求数据库初始化脚本存储路径权限设置兼容性说明IE8特殊处理现代浏览器优化降级方案实际项目建议兄弟们虽然我们接了这个活但说实话100块预算真的不够看。这里有几个建议分阶段交付先实现基本文件上传功能再逐步添加高级功能简化加密初期可以用ZIP压缩代替加密降低开发难度性能优化20GB文件上传需要服务器有足够资源建议客户升级硬件额外收费把兼容IE8作为额外服务收费不然真要亏本完整代码获取由于篇幅限制完整代码包括前端构建、后端实现、数据库脚本等已经放在GitHub上了https://github.com/your-repo/large-file-uploader加入我们的接单群最后打个广告欢迎加入我们的接单群374992201免费获取完整项目代码7*24小时技术支持接单合作机会红包活动进行中高额提成计划推荐就有20%起群里大佬云集无论是找工作、接私单还是技术交流都是不二之选特别是最近有红包活动加群就送1-99元快来抢啊总结这次的项目虽然挑战很大但通过合理的分片上传、状态保存和兼容性处理我们完全可以在预算内完成。关键是要前端做好分片和进度保存后端稳定接收分片并记录状态特别注意IE8的兼容性问题加密部分可以简化或作为增值服务希望这个方案对大家有所帮助也欢迎在群里一起讨论更优的解决方案设置框架安装.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创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例