企业官网建设流程全解析

九江做网站的,网站建设中有关数据库问题,桂林生活网电脑版,新媒体运营#x1f4c5; 开发者日志#xff1a;大文件上传系统的艰难实现之路 项目背景 2023年11月15日#xff0c;周三#xff0c;晴转多云 今天正式接手了一个具有挑战性的外包项目——构建一个支持20GB超大文件传输的Web系统。客户要求苛刻但预算有限#xff0c;作为一名个人开… 开发者日志大文件上传系统的艰难实现之路项目背景2023年11月15日周三晴转多云今天正式接手了一个具有挑战性的外包项目——构建一个支持20GB超大文件传输的Web系统。客户要求苛刻但预算有限作为一名个人开发者这既是一次机遇也是巨大的挑战。需求分析核心功能需求超大文件支持单文件20GB传输批量传输包含上千文件的文件夹层级结构保持安全要求SM4/AES加密传输与存储稳定性断点续传需持久化保存进度兼容性必须支持IE8等老旧浏览器技术栈确认前端Vue3 WebUploader/原生H5后端ASP.NET Core (.NET 8)数据库SQL Server存储阿里云OSS跨平台支持Windows/macOS/Linux全平台技术难点突破文件夹结构保持方案// 文件夹上传处理逻辑classFolderUploader{constructor(){this.folderStructurenewMap();// 使用Map保存完整路径}processEntry(entry,path){returnnewPromise((resolve){if(entry.isFile){entry.file(file{constfullPath${path}/${file.name};this.folderStructure.set(fullPath,file);resolve();});}elseif(entry.isDirectory){constdirReaderentry.createReader();dirReader.readEntries(entries{constpromisesentries.map(subEntrythis.processEntry(subEntry,${path}/${entry.name}));Promise.all(promises).then(resolve);});}});}}断点续传持久化方案// ASP.NET Core 断点续传状态管理publicclassUploadStateService{privatereadonlyConcurrentDictionary_stateCache;publicUploadStateService(){_stateCachenewConcurrentDictionary();}publicvoidSaveState(stringfileId,longchunkIndex){varstate_stateCache.GetOrAdd(fileId,idnewUploadState(id));state.UploadedChunks.Add(chunkIndex);// 持久化到数据库usingvardbnewAppDbContext();db.UploadStates.Update(state.ToEntity());db.SaveChanges();}publicUploadStateGetState(stringfileId){if(_stateCache.TryGetValue(fileId,outvarstate)){returnstate;}// 从数据库加载usingvardbnewAppDbContext();varentitydb.UploadStates.Find(fileId);returnentity?.ToModel()??newUploadState(fileId);}}前后端完整交互示例前端加密上传实现// 基于WebUploader的加密上传组件exportclassSecureFileUploader{constructor(options){this.uploaderWebUploader.create({swf:/libs/Uploader.swf,server:options.uploadUrl,chunked:true,chunkSize:4*1024*1024,// 4MB分片threads:3,prepareNextFile:true,fileSizeLimit:20*1024*1024*1024// 20GB});this.initEvents();this.cryptoWorkernewWorker(/js/crypto.worker.js);}initEvents(){this.uploader.on(uploadBeforeSend,(obj,data){returnnewPromise(resolve{this.cryptoWorker.postMessage({type:encrypt,data:obj.file,algorithm:SM4});this.cryptoWorker.onmessage(e){data.filee.data;resolve(data);};});});this.uploader.on(fileQueued,file{conststatelocalStorage.getItem(upload_${file.id});if(state){this.uploader.uploader.upload(file,JSON.parse(state));}});}}后端分片处理实现// ASP.NET Core 文件分片控制器[ApiController][Route(api/upload)]publicclassUploadController:ControllerBase{privatereadonlyUploadStateService_stateService;privatereadonlyIOSSClient_ossClient;publicUploadController(UploadStateServicestateService,IOSSClientossClient){_stateServicestateService;_ossClientossClient;}[HttpPost(chunk)]publicasyncTaskUploadChunk([FromForm]IFormFilefile,[FromForm]stringfileId,[FromForm]intchunkIndex,[FromForm]inttotalChunks){usingvarmemoryStreamnewMemoryStream();awaitfile.CopyToAsync(memoryStream);// 解密处理vardecryptedDataCryptoHelper.SM4Decrypt(memoryStream.ToArray(),Configuration[EncryptionKey]);// 存储到OSSvarchunkKey${fileId}/{chunkIndex};await_ossClient.PutObjectAsync(uploads,chunkKey,newMemoryStream(decryptedData));// 更新状态_stateService.SaveState(fileId,chunkIndex);if(chunkIndextotalChunks-1){// 触发文件合并BackgroundJob.Enqueue(()MergeFileChunks(fileId));}returnOk(new{successtrue});}[NonAction]publicasyncTaskMergeFileChunks(stringfileId){varstate_stateService.GetState(fileId);varfinalKey$files/{DateTime.Now:yyyyMMdd}/{fileId};usingvarfinalStreamnewMemoryStream();foreach(varchunkinstate.UploadedChunks.OrderBy(xx)){varchunkKey${fileId}/{chunk};varchunkDataawait_ossClient.GetObjectAsync(uploads,chunkKey);awaitchunkData.CopyToAsync(finalStream);await_ossClient.DeleteObjectAsync(uploads,chunkKey);}finalStream.Position0;await_ossClient.PutObjectAsync(final,finalKey,finalStream);}}兼容性处理方案IE8兼容层实现// ie8-wrapper.js(function(){// Polyfill for File APIif(!window.File){window.Filefunction(){};window.FileReaderfunction(){this.readAsArrayBufferfunction(blob){// IE8的ActiveX实现varaxonewActiveXObject(ADODB.Stream);axo.Type1;// 二进制类型axo.Open();axo.LoadFromFile(blob.name);varbufferaxo.Read();this.onload({target:{result:buffer}});};};}// Polyfill for FormDataif(!window.FormData){window.FormDatafunction(){this.appendfunction(key,value){// 使用隐藏iframe实现表单提交variframedocument.createElement(iframe);iframe.nameformdata-iframe;document.body.appendChild(iframe);varformdocument.createElement(form);form.targetiframe.name;form.methodPOST;form.enctypemultipart/form-data;varinputdocument.createElement(input);input.typehidden;input.namekey;input.valuevalue;form.appendChild(input);document.body.appendChild(form);form.submit();};};}})();开发文档结构 项目文档 ├── 1. 系统架构设计 │ ├── 1.1 技术栈说明 │ ├── 1.2 系统架构图 │ └── 1.3 部署拓扑图 ├── 2. API接口文档 │ ├── 2.1 上传接口规范 │ ├── 2.2 下载接口规范 │ └── 2.3 状态管理接口 ├── 3. 前端集成指南 │ ├── 3.1 WebUploader配置 │ ├── 3.2 加密模块使用 │ └── 3.3 兼容性处理 ├── 4. 后端部署手册 │ ├── 4.1 环境配置 │ ├── 4.2 数据库初始化 │ └── 4.3 性能调优 └── 5. 运维监控 ├── 5.1 日志收集 ├── 5.2 异常告警 └── 5.3 扩容方案项目总结已解决问题通过分片加密上传实现了20GB文件支持使用目录树遍历算法保持文件夹结构结合本地存储和数据库实现持久化断点续传开发多套降级方案保证IE8兼容性待解决问题极端网络环境下分片成功率优化OSS批量操作的性能瓶颈国产浏览器(红莲花等)的特殊适配后记这个项目让我深刻体会到企业级文件传输的复杂性。欢迎同行加入QQ群374992201交流大文件传输技术共同应对外包项目中的各种挑战。设置框架安装.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创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例