广州 深圳 外贸网站建设公司小程序开发收费价目表

广州 深圳 外贸网站建设公司,小程序开发收费价目表,广州外贸营销型网站,wordpress不支持video标签2023年10月15日 - 大文件上传系统开发日志 项目背景 今天正式接手了这个具有挑战性的文件上传系统项目。客户需求相当专业#xff1a;需要支持20G大文件传输、文件夹层级结构保持、断点续传#xff0c;还要兼容IE8这样的古董浏览器。作为个人开发者#xff0c;这绝对是一个…2023年10月15日 - 大文件上传系统开发日志项目背景今天正式接手了这个具有挑战性的文件上传系统项目。客户需求相当专业需要支持20G大文件传输、文件夹层级结构保持、断点续传还要兼容IE8这样的古董浏览器。作为个人开发者这绝对是一个证明自己技术实力的好机会。技术选型分析经过一天的调研和验证我确定了以下技术方案前端方案对于现代浏览器使用HTML5 File API IndexedDB实现对于IE8使用Flash作为后备方案(虽然不情愿但不得不支持)加密方案使用CryptoJS实现SM4和AES加密进度管理LocalStorage Service Worker双保险后端方案文件切片10MB为一个chunk断点续传SQL Server记录上传状态存储策略阿里云OSS分片上传API加密存储服务器端二次加密核心代码片段前端关键代码 (基于原生JS)// 文件上传核心逻辑classBigFileUploader{constructor(){this.chunkSize10*1024*1024;// 10MBthis.maxRetry3;this.concurrentUploads3;}// 处理文件夹上传asyncuploadFolder(folder,basePath){constentriesawaitthis.readDirectory(folder);for(letentryofentries){if(entry.isDirectory){awaitthis.uploadFolder(entry,${basePath}/${entry.name});}else{awaitthis.uploadFile(entry.file,basePath);}}}// 文件分片上传asyncuploadFile(file,relativePath){consttotalChunksMath.ceil(file.size/this.chunkSize);constfileIdthis.generateFileId(file,relativePath);// 检查已上传的分片constuploadedChunksawaitthis.checkUploadedChunks(fileId);for(letchunkIndex0;chunkIndextotalChunks;chunkIndex){if(uploadedChunks.includes(chunkIndex))continue;constchunkfile.slice(chunkIndex*this.chunkSize,Math.min(file.size,(chunkIndex1)*this.chunkSize));constencryptedChunkthis.encryptChunk(chunk);awaitthis.uploadChunk(fileId,chunkIndex,encryptedChunk);// 保存进度this.saveProgress(fileId,chunkIndex);}// 通知服务器完成上传awaitthis.completeUpload(fileId,totalChunks);}}后端关键代码 (C# WebForm)// 文件上传处理类publicclassFileUploadHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){stringactioncontext.Request[action];switch(action){caseupload:HandleChunkUpload(context);break;casecheck:CheckChunkStatus(context);break;casecomplete:CompleteFileUpload(context);break;}}privatevoidHandleChunkUpload(HttpContextcontext){stringfileIdcontext.Request[fileId];intchunkIndexint.Parse(context.Request[chunkIndex]);// 获取加密分片数据StreamchunkStreamcontext.Request.InputStream;// 解密数据byte[]decryptedDataDecryptChunk(chunkStream,SM4);// 存储到临时位置stringtempPathGetChunkTempPath(fileId,chunkIndex);File.WriteAllBytes(tempPath,decryptedData);// 记录数据库RecordChunkUpload(fileId,chunkIndex,tempPath);}privatevoidCompleteFileUpload(HttpContextcontext){stringfileIdcontext.Request[fileId];inttotalChunksint.Parse(context.Request[totalChunks]);// 验证所有分片是否完整if(!VerifyAllChunks(fileId,totalChunks)){context.Response.Write({\status\:\error\, \message\:\Missing chunks\});return;}// 合并分片stringfinalPathMergeChunks(fileId,totalChunks);// 上传到阿里云OSSUploadToOSS(finalPath);// 清理临时文件CleanTempFiles(fileId);context.Response.Write({\status\:\success\});}}今日技术难点与解决方案IE8兼容性问题方案使用Flash作为后备方案检测浏览器支持情况自动切换代码通过条件注释加载不同版本的JS文件大文件夹遍历性能问题1000文件的文件夹会导致UI冻结方案使用Web Workers进行后台处理实现将文件遍历逻辑放入Worker中断点续传可靠性问题浏览器关闭后如何恢复方案LocalStorage Service Worker双备份优化定期将进度同步到服务器明日计划完成文件夹下载功能的非打包实现测试各浏览器下的加密传输性能编写SQL Server的存储过程优化分片查询开始编写技术文档项目感悟这个项目确实很有挑战但也是提升全栈能力的好机会。特别是对老浏览器的兼容让我重新认识了渐进增强的重要性。希望最终交付的产品能让客户满意也为自己积累一个重量级的案例。PS欢迎同行交流我的QQ群374992201大家可以一起讨论技术难题共享外包资源。注以上代码为关键部分示例完整实现需要考虑更多边界条件和错误处理。实际开发中建议使用TypeScript增强代码可靠性。设置框架安装.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创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例