当前位置：首页 > news >正文

HTML如何设计JQuery支持大文件上传的拖拽功能？

news 2026/8/22 14:02:13

2023年11月2日星期四阴有小雨
外包项目日志 - 企业级大文件传输系统Day3

项目背景与架构设计

客户是某地质勘探研究院，每日需上传**20GB+**的勘探数据（含激光扫描点云、地质剖面图等），要求：

文件夹结构保留：1000+分类/日，需完整维护项目编号/日期/设备类型/的层级
军工级加密：传输层SM4（国产商用密码）+存储层AES-256双重加密
极端断点续传：浏览器崩溃/系统重启后能从最后一个分片恢复

技术栈升级：

前端：Vue3 + WebUploader（强制分片+IndexedDB+Service Worker）
后端：ASP.NET WebForm + OSS分片直传
数据库：SQL Server文件元数据树形存储（CTE递归查询优化）

核心代码实现

1. 前端：文件夹结构解析与分片调度

// 使用FileSystem API递归读取文件夹（H5方案）asyncfunctionscanDirectory(dirHandle){constfileTree={};forawait(const[name,handle]ofdirHandle.entries()){if(handle.kind==='file'){fileTree[name]=awaithandle.getFile();}elseif(handle.kind==='directory'){fileTree[name]=awaitscanDirectory(handle);// 递归构建树}}returnfileTree;}// IE8降级方案：通过ActiveX获取文件夹路径functionscanFolderIE8(path){constfso=newActiveXObject("Scripting.FileSystemObject");constfolder=fso.GetFolder(path);constfiles=newEnumerator(folder.files);// 注：需客户系统启用ActiveX}

2. 后端：分片合并与OSS直传（C#）

// UploadHandler.ashxpublicvoidProcessRequest(HttpContextcontext){stringfileId=context.Request["fileId"];intchunkIndex=int.Parse(context.Request["chunkIndex"]);// 加密分片（SM4+CBC模式）byte[]encryptedChunk;using(SM4sm4=newSM4()){encryptedChunk=sm4.EncryptCBC(File.ReadAllBytes(context.Request.Files[0].InputStream),ConfigurationManager.AppSettings["SM4_Key"],ConfigurationManager.AppSettings["SM4_IV"]);}// 临时分片存储stringchunkPath=$"{OSS_TEMP_PATH}/{fileId}_{chunkIndex}.part";File.WriteAllBytes(chunkPath,encryptedChunk);// 响应分片上传结果context.Response.Write(JsonConvert.SerializeObject(new{status="success",nextChunk=chunkIndex+1}));}

3. 断点续传持久化方案

// Service Worker离线缓存控制self.addEventListener('fetch',event=>{if(event.request.url.includes('/api/upload_chunk')){event.respondWith(caches.open('upload-cache').then(cache=>{returnfetch(event.request).then(response=>cache.put(event.request,response.clone())).catch(()=>cache.match(event.request));// 失败时使用缓存}));}});

今日技术突破

国产浏览器适配：
- 红莲花浏览器需关闭SameSite限制，添加头Set-Cookie: Secure; SameSite=None
- 龙芯浏览器要求分片大小必须为2MB整数倍
超大规模文件夹优化：
- 采用虚拟滚动渲染文件树（实测支持10万+文件展示）
- 数据库使用HierarchyId类型存储路径结构
加密性能问题：
- 在Web Worker中运行SM4算法，避免UI线程阻塞

遇到的深坑

IE8的内存泄漏：
- WebUploader的Flash组件连续上传5次后会崩溃
- 临时方案：每上传完成3个文件后强制刷新Flash容器
OSS分片合并超时：
- 20GB文件合并时HTTP请求超时
- 最终方案：改用OSS OpenAPI的CompleteMultipartUpload

明日计划

编写完整开发文档（含国产化适配章节）
压力测试：模拟100并发文件夹上传
联系客户确认信创环境具体参数

附：项目结构示意图

📦FileSystemCore ├───Client │ ├── WebUploader // 兼容层 │ └── FileTree.vue // 虚拟滚动组件 ├───Server │ ├── FileService.asmx // 主逻辑 │ └── SM4Helper.cs // 国密算法封装 └───Docs ├── 信创环境部署指南.md └── 二次开发API文档.md

（日记风格建议：突出技术难点解决过程+客户特殊需求应对策略）

如果需要完整的ASP.NET分片合并方案或SM4算法封装库，可以进一步交流！已申请加入QQ群374992201。