企业官网建设流程全解析

开发者日记：大文件传输系统开发历程

2023年11月15日 多云转晴

今天接手了一个颇具挑战性的外包项目 - 基于浏览器的超大文件传输系统。客户要求异常严格，必须支持20G文件的断点续传，还要兼容IE8这种"古董"浏览器。作为一名在安徽独立打拼的开发者，这既是一次机会也是一次考验。

技术方案分析

经过一整天的调研，我确定了以下技术路线：

1. 前端方案：由于需要兼容IE8，Vue3只能作为渐进增强方案，核心功能必须使用原生JS实现。文件夹结构保留将通过webkitdirectory属性配合自定义目录结构算法实现。

2. 加密方案：采用国密SM4为主，AES-256为辅的混合加密策略。SM4更适合国内环境，而AES则提供更广泛的兼容性。

3. 断点续传：需要在客户端存储分片信息，使用IndexedDB+localStorage的降级方案，确保IE8也能工作。

4. 后端存储：阿里云OSS直接存储加密后的文件，数据库只记录元数据和分片信息。

部分核心代码实现

前端文件选择处理 (原生JS)

// 文件选择处理器 - 兼容IE8和其他现代浏览器functionhandleFileSelect(event){constfiles=event.target.files;constitems=event.dataTransfer?event.dataTransfer.items:null;// 处理文件夹上传if(items&&items[0].webkitGetAsEntry){processDirectoryEntries(items);}else{// 普通文件处理processFiles(files);}}// 递归处理目录结构functionprocessDirectoryEntries(items){for(leti=0;i<items.length;i++){constentry=items[i].webkitGetAsEntry();if(entry.isFile){entry.file(file=>{file.fullPath=entry.fullPath||file.name;addFileToQueue(file);});}elseif(entry.isDirectory){constdirReader=entry.createReader();dirReader.readEntries(entries=>{processDirectoryEntries(entries);});}}}

后端分片上传接口 (ASP.NET Core)

[ApiController][Route("api/upload")]publicclassUploadController:ControllerBase{privatereadonlyIUploadService_uploadService;publicUploadController(IUploadServiceuploadService){_uploadService=uploadService;}[HttpPost("chunk")]publicasyncTaskUploadChunk([FromForm]ChunkUploadRequestrequest){try{varresult=await_uploadService.ProcessChunkAsync(request);returnOk(result);}catch(Exceptionex){returnStatusCode(500,new{error=ex.Message});}}}publicclassChunkUploadRequest{publicstringFileId{get;set;}publicintChunkNumber{get;set;}publicintTotalChunks{get;set;}publicstringFileName{get;set;}publicstringRelativePath{get;set;}// 保留文件夹结构publicIFormFileFile{get;set;}publicstringHash{get;set;}}

加密工具类 (SM4实现)

publicstaticclassSM4Util{privatestaticreadonlyEncodingEncoding=Encoding.UTF8;publicstaticstringEncrypt(stringplainText,stringkey){varsm4=newSM4();varencrypted=sm4.EncryptECB(Encoding.GetBytes(plainText),Encoding.GetBytes(key));returnConvert.ToBase64String(encrypted);}publicstaticstringDecrypt(stringcipherText,stringkey){varsm4=newSM4();vardecrypted=sm4.DecryptECB(Convert.FromBase64String(cipherText),Encoding.GetBytes(key));returnEncoding.GetString(decrypted);}}

IE8兼容方案

这可能是最具挑战的部分。我需要实现一个降级方案：

1. Flash/ActiveX备用方案：当检测到IE8时，加载备用上传器
2. 分片上传：即使使用Flash也要支持
3. 进度存储：使用cookie和userData行为存储进度

// 检测IE8并加载备用上传器if(document.documentMode&&document.documentMode<=8){loadLegacyUploader();}functionloadLegacyUploader(){// 使用Flash或Silverlight实现上传功能varswfUrl="/Content/Uploader.swf";swfobject.embedSWF(swfUrl,"uploadContainer","100%","400","10.0.0");}

明日计划

1. 完成文件夹结构递归算法的测试
2. 实现IE8下的分片上传功能
3. 编写SQL Server存储过程，优化大容量数据存储

这个项目虽然挑战巨大，但恰好能检验我多年的全栈开发经验。如果能顺利完成，不仅能帮助客户解决实际问题，也能为我的技术履历添上浓墨重彩的一笔。

设置框架

目标框架选择 .NET 8.0

IDE使用Visual Studio 2022

编译项目

修改测试端口

修改项目测试端口，根据客户服务器环境修改。不一定是示例中的端口。

访问测试页面

测试一下配置是否正确。

NOSQL

NOSQL无需任何配置可直接访问页面进行测试

创建数据库

连接数据库

数据表

检查创建的数据表，数据表创建成功后可以在数据库下面的表节点中看到

查询数据

配置数据库连接信息

检查数据库配置

访问页面进行测试

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载完整示例

已经上传到gitee了，可以直接下载

下载完整示例