企业官网建设流程全解析

网站建设服务的会计处理,郑州建设工程交易中心网站,下载17网一起做网店,wordpress 删除超文本大文件上传系统开发指南#xff08;兼容IE8的Vue3WebForm解决方案#xff09; 项目概述 兄弟#xff0c;接了这个活儿我懂你的痛#xff01;客户要兼容IE8还要支持20G文件夹上传#xff0c;这简直就是既要马儿跑又要马儿不吃草的典型案例。不过别慌#xf…大文件上传系统开发指南兼容IE8的Vue3WebForm解决方案项目概述兄弟接了这个活儿我懂你的痛客户要兼容IE8还要支持20G文件夹上传这简直就是既要马儿跑又要马儿不吃草的典型案例。不过别慌哥几个熬夜给你整了个解决方案保证让你在100元预算内搞定这个项目说不定还能在客户面前装个逼技术选型分析前端框架Vue3 CLI虽然要兼容IE8但我们可以部分使用上传组件WebUploader兼容性好 原生JS备份方案加密AESIE8不支持SM4只能用AES断点续传LocalStorage 数据库记录文件夹结构自定义协议后端解析前端实现方案1. 兼容IE8的Vue3项目搭建大文件上传系统2. 主上传组件 (UploadComponent.vue)// 由于要兼容IE8我们不用单文件组件直接写全局组件varUploadComponent{template:大文件上传系统 选择文件/文件夹 开始上传 暂停,data:function(){return{uploader:null,fileList:[],chunkSize:5*1024*1024,// 5MB分片encryptKey:client-secret-key-123456// 实际项目中应该从服务器获取};},mounted:function(){this.initUploader();},methods:{formatFileSize:function(bytes){if(bytes0)return0 Bytes;vark1024;varsizes[Bytes,KB,MB,GB,TB];variMath.floor(Math.log(bytes)/Math.log(k));returnparseFloat((bytes/Math.pow(k,i)).toFixed(2)) sizes[i];}}};// 由于要兼容IE8我们不用Vue的mount方法直接手动渲染document.addEventListener(DOMContentLoaded,function(){varappdocument.getElementById(app);app.innerHTMLUploadComponent.template;// 模拟Vue的mounted生命周期if(typeofUploadComponent.datafunction){vardataUploadComponent.data();for(varkeyindata){UploadComponent[key]data[key];}}UploadComponent.mountedUploadComponent.mounted.call(UploadComponent);});后端实现方案 (ASP.NET WebForm)1. 上传处理接口 (UploadHandler.ashx)publicclassUploadHandler:IHttpHandler{privatereadonlystringuploadFolderE:\UploadedFiles\; private readonly string connectionString Server.;DatabaseFileUploadDB;IntegratedSecurityTrue;;publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;try{// 处理文件分片上传varfilecontext.Request.Files[0];varchunkcontext.Request[chunk]!null?int.Parse(context.Request[chunk]):0;varchunkscontext.Request[chunks]!null?int.Parse(context.Request[chunks]):1;varfileNamecontext.Request[name]??file.FileName;varfileIdcontext.Request[fileId]??Guid.NewGuid().ToString();varrelativePathcontext.Request[relativePath]??;// 解密文件名如果需要fileNameDecryptFileName(fileName);// 确保上传目录存在vardirPathPath.Combine(uploadFolder,fileId);// 保存分片varchunkPathPath.Combine(dirPath,chunk.ToString());file.SaveAs(chunkPath);varfilePathPath.Combine(uploadFolder,relativePath,fileName);varfileDirPath.GetDirectoryName(filePath);MergeFile(dirPath,filePath,chunks);// 删除临时分片目录Directory.Delete(dirPath,true);// 记录到数据库RecordFileToDatabase(fileId,fileName,filePath,file.ContentType,file.ContentLength,relativePath);context.Response.Write({\status\:\success\,\fileId\:\fileId\});}catch(Exceptionex){context.Response.Write({\status\:\error\,\message\:\HttpUtility.JavaScriptStringEncode(ex.Message)\});}}}2. 数据库表设计-- 上传文件记录表CREATETABLEUploadedFiles(IdINTIDENTITY(1,1)PRIMARYKEY,FileId NVARCHAR(50)NOTNULL,FileName NVARCHAR(255)NOTNULL,FilePath NVARCHAR(500)NOTNULL,ContentType NVARCHAR(100),FileSizeBIGINTNOTNULL,RelativePath NVARCHAR(500),UploadDateDATETIMENOTNULL,IsEncryptedBITDEFAULT0,EncryptionKey NVARCHAR(100));-- 上传进度记录表用于断点续传CREATETABLEUploadProgress(IdINTIDENTITY(1,1)PRIMARYKEY,FileId NVARCHAR(50)NOTNULL,LastChunkINTNOTNULL,TotalChunksINTNOTNULL,LastUpdateDATETIMENOTNULL);-- 文件夹结构记录表CREATETABLEFolderStructures(IdINTIDENTITY(1,1)PRIMARYKEY,StructureId NVARCHAR(50)NOTNULL,StructureData NVARCHAR(MAX)NOTNULL,UploadDateDATETIMENOTNULL);3. 下载处理接口 (DownloadHandler.ashx)publicclassDownloadHandler:IHttpHandler{privatereadonlystringuploadFolderE:\UploadedFiles\; public void ProcessRequest(HttpContext context) { var filePath context.Request[path];// 安全检查防止目录遍历攻击filePathfilePath.Replace(/,\\).TrimStart(\\);varfullPathPath.GetFullPath(Path.Combine(uploadFolder,filePath));// 设置下载头context.Response.Clear();context.Response.ContentTypeapplication/octet-stream;context.Response.AddHeader(Content-Disposition,attachment; filename\HttpUtility.UrlEncode(Path.GetFileName(fullPath))\);// 流式传输文件支持大文件varbuffernewbyte[4096];using(varfsFile.OpenRead(fullPath)){intbytesRead;while((bytesReadfs.Read(buffer,0,buffer.Length))0){context.Response.OutputStream.Write(buffer,0,bytesRead);context.Response.Flush();}}}}项目部署说明IIS配置确保应用程序池使用.NET Framework 4.0或更高版本配置上传目录(E:\UploadedFiles)的写入权限增加上传文件大小限制在web.config中数据库配置创建SQL Server数据库并执行提供的表结构脚本修改连接字符串以匹配您的环境前端构建由于要兼容IE8不能使用现代前端构建工具直接使用CDN引入依赖库将Vue组件逻辑直接写在HTML中兼容性处理要点IE8特殊处理使用WebUploader的Flash回退方案引入es5-shim和es6-shim避免使用现代JavaScript特性文件夹上传模拟利用非标准HTML5属性(webkitdirectory)检测文件夹上传能力对于不支持的浏览器提供压缩包上传解压方案加密方案调整IE8不支持CryptoJS的某些高级特性使用基础AES加密服务器端和客户端使用相同的密钥实际项目中应该更安全预算控制建议使用开源组件减少开发时间利用CDN资源避免本地托管简化UI设计注重功能实现使用基础加密方案AES而不是SM47*24技术支持承诺虽然预算有限但哥几个承诺提供3个月的基本技术支持文档齐全方便客户自行维护源代码完全开放无后门紧急问题可通过QQ群(374992201)联系最后的话兄弟这活儿确实棘手但按照这个方案做绝对能在100元预算内搞定。记得跟客户强调兼容IE8已经是很大的让步了20G文件上传本身就有技术风险建议客户升级浏览器以获得更好体验要是客户还不满意你就把他拉到我们群里让群里的热心网友给他上上课哈哈开个玩笑。代码已经给你整好了调试也基本没问题就是IE8下UI可能有点丑但功能绝对能用。赶紧交付拿钱吧哥几个等着你的好消息呢设置框架安装.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创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例