网站的建站风格网业小游戏

网站的建站风格,网业小游戏,网站开发怎么挣外快,缔客网络上海响应式网站建设开发者日记#xff1a;2023年X月X日 星期X 长沙 晴 项目背景 今日正式启动客户的大文件传输系统项目#xff0c;需求明确#xff1a;支持20G文件/文件夹上传下载、跨平台#xff08;Windows/macOS/Linux#xff09;、全浏览器兼容#xff08;含IE8#xff09;、断点续传…开发者日记2023年X月X日 星期X 长沙 晴项目背景今日正式启动客户的大文件传输系统项目需求明确支持20G文件/文件夹上传下载、跨平台Windows/macOS/Linux、全浏览器兼容含IE8、断点续传、保留文件夹层级结构。后端使用**.NET Core**而非PHP数据库改为SQL Server存储仍用阿里云OSS前端为Vue3 CLI WebUploader/H5。客户强调高频文件夹上传场景需极致优化用户体验。免费开源代码和7*24支持的压力依旧但技术栈调整带来新挑战。技术选型与调整前端框架Vue3 CLI维持组件化开发但需适配IE8的Polyfill如babel-polyfill。WebUploader核心上传组件需深度定制文件夹解析逻辑。H5 File API现代浏览器备用方案IE8回退到Flash上传。后端架构.NET Core替代PHP利用IFormFile处理分片System.Data.SqlClient操作SQL Server。SQL Server存储文件元数据路径、分片状态、用户ID。核心难点升级高频文件夹上传需优化递归解析性能避免前端卡顿。断点续传稳定性SQL Server事务保证分片记录一致性。IE8兼容性Flash上传需处理跨域问题crossdomain.xml。前端代码优化Vue3 WebUploader1. 强化文件夹上传逻辑// src/components/FolderUploader.vueimport{ref,onMounted}fromvue;importWebUploaderfromwebuploader;importwebuploader/dist/webuploader.css;exportdefault{setup(){constuploaderref(null);constfolderTreeref([]);// 存储文件夹层级结构onMounted((){// 动态加载FlashIE8兼容if(!WebUploader.Uploader.support(HTML5)){WebUploader.Uploader.register({name:flash,fn:()/assets/Uploader.swf});}uploader.valuenewWebUploader.Uploader({swf:/assets/Uploader.swf,server:/api/upload,pick:#folderPicker,chunked:true,chunkSize:4*1024*1024,// 4MB分片formData:{fileId:,isDir:false,relativePath:// 关键记录文件相对路径}});// 监听文件夹选择需配合input[directory]document.getElementById(folderInput).addEventListener(change,(e){constitemse.target.files;if(items){parseFolder(items);// 递归解析文件夹}});});// 递归解析文件夹兼容现代浏览器constparseFolder(items){consttree[];for(leti0;iitems.length;i){constfileitems[i];constpathfile.webkitRelativePath||file.name;// 相对路径constsegmentspath.split(/);// 构建树形结构letcurrentLeveltree;segments.slice(0,-1).forEach(segment{letdircurrentLevel.find(itemitem.namesegment);if(!dir){dir{name:segment,type:directory,children:[]};currentLevel.push(dir);}currentLeveldir.children;});// 添加文件节点currentLevel.push({name:segments.pop(),type:file,file:file,relativePath:path});}folderTree.valuetree;uploadFolder(tree);};// 上传文件夹内容constuploadFolder(tree){tree.forEach(node{if(node.typedirectory){uploadFolder(node.children);// 递归上传子目录}else{constformDatauploader.value.option(formData);formData.relativePathnode.relativePath;uploader.value.addFile(node.file,node.relativePath);}});};return{uploader,folderTree};}};2. IE8兼容性处理后端代码实现.NET Core SQL Server1. 分片上传接口// Controllers/UploadController.csusingMicrosoft.AspNetCore.Mvc;usingSystem.Data.SqlClient;usingSystem.IO;[ApiController][Route(api/upload)]publicclassUploadController:ControllerBase{privatereadonlyIConfiguration_config;publicUploadController(IConfigurationconfig)_configconfig;[HttpPost]publicasyncTaskUpload([FromForm]UploadModelmodel){varfileIdmodel.FileId??Guid.NewGuid().ToString();vartempDirPath.Combine(/tmp/uploads,fileId);Directory.CreateDirectory(tempDir);// 保存分片varchunkPathPath.Combine(tempDir,$chunk_{model.ChunkIndex});using(varstreamnewFileStream(chunkPath,FileMode.Create)){awaitmodel.File.CopyToAsync(stream);}// 记录分片状态到SQL Serverusing(varconnnewSqlConnection(_config.GetConnectionString(Default))){awaitconn.OpenAsync();varcmdnewSqlCommand(MERGE INTO UploadProgress AS target USING (VALUES (fileId, chunkIndex, totalChunks)) AS source (FileId, ChunkIndex, TotalChunks) ON target.FileId source.FileId AND target.ChunkIndex source.ChunkIndex WHEN NOT MATCHED THEN INSERT (FileId, ChunkIndex, TotalChunks, UploadedAt) VALUES (source.FileId, source.ChunkIndex, source.TotalChunks, GETDATE());,conn);cmd.Parameters.AddWithValue(fileId,fileId);cmd.Parameters.AddWithValue(chunkIndex,model.ChunkIndex);cmd.Parameters.AddWithValue(totalChunks,model.TotalChunks);awaitcmd.ExecuteNonQueryAsync();}// 如果是最后一块合并并上传OSSif(model.ChunkIndexmodel.TotalChunks-1){varfinalPathPath.Combine(tempDir,final_file);using(varoutputSystem.IO.File.Create(finalPath)){for(inti0;imodel.TotalChunks;i){varchunkSystem.IO.File.ReadAllBytes(Path.Combine(tempDir,$chunk_{i}));awaitoutput.WriteAsync(chunk,0,chunk.Length);}}// 上传OSS需引入阿里云OSS SDKvarclientnewOSSClient(endpoint,accessKey,secretKey);awaitclient.PutObjectAsync(bucket-name,$uploads/{fileId},finalPath);// 清理临时文件Directory.Delete(tempDir,true);}returnOk(new{successtrue,fileId});}}publicclassUploadModel{publicIFormFileFile{get;set;}publicstringFileId{get;set;}publicintChunkIndex{get;set;}publicintTotalChunks{get;set;}publicstringRelativePath{get;set;}// 文件夹层级路径}2. SQL Server表结构CREATETABLEUploadProgress(IdINTIDENTITY(1,1)PRIMARYKEY,FileId NVARCHAR(64)NOTNULL,ChunkIndexINTNOTNULL,TotalChunksINTNOTNULL,UploadedAt DATETIME2DEFAULTGETDATE(),UNIQUE(FileId,ChunkIndex));断点续传实现1. 前端恢复逻辑// 检查未完成上传constcheckResumeasync(fileId){constresawaitfetch(/api/upload/progress?fileId${fileId});constdataawaitres.json();if(data.completedChunksdata.totalChunks){uploader.value.option(formData,{fileId,chunk:data.completedChunks});uploader.value.upload();}};// 本地存储fileId即使浏览器关闭window.addEventListener(beforeunload,(){if(uploader.value.getFiles().length0){localStorage.setItem(lastUploadId,uploader.value.option(formData).fileId);}});2. 后端进度查询[HttpGet(progress)]publicasyncTaskGetProgress(stringfileId){using(varconnnewSqlConnection(_config.GetConnectionString(Default))){awaitconn.OpenAsync();varcmdnewSqlCommand(SELECT COUNT(*) AS Completed FROM UploadProgress WHERE FileId fileId,conn);cmd.Parameters.AddWithValue(fileId,fileId);varcount(int)awaitcmd.ExecuteScalarAsync();returnOk(new{completedChunkscount});}}今日总结进展完成文件夹层级解析和.NET Core分片上传逻辑IE8兼容性方案验证通过。问题WebUploader在IE8下对大文件夹性能较差需优化DOM操作。SQL Server事务需加强避免分片记录残留。明日计划实现OSS分片上传避免本地合并临时文件。编写完整的错误处理和日志系统。求助若有熟悉.NET Core文件处理或SQL Server优化的高手欢迎加入QQ群374992201指导代码将完全开源回馈社区。注实际项目需补充安全校验、OSS直传和性能监控代码。设置框架安装.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创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载完整示例下载完整示例