肥猫姜黄1. 项目背景与需求分析
作为一位长期奋战在企业级应用开发一线的.NET工程师，最近接手了一个颇具挑战性的文件管理系统开发需求。客户是一家大型设计院，需要将历年积累的海量设计文档（包括PSD、CAD等大体积文件）迁移到线上管理系统。核心痛点在于：
- 超大文件传输：单个PSD文件经常超过10GB，传统表单上传完全不可行
- 复杂目录结构：需要完整保留
/部门/年份/项目阶段/文件类型/这样的多级目录体系 - 老旧环境兼容：客户部分办公电脑仍在使用Windows 7+IE8组合，无法升级
- 数据安全保障：传输和存储都需要企业级加密，且支持断点续传
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术方案选型与架构设计
2.1 整体技术栈组合
经过多轮技术验证，最终确定的方案架构如下：
code复制[前端]
├─ Vue3 + WebUploader (主流程)
├─ Flash插件 (IE8兼容层)
└─ CryptoJS (前端加密)
[后端]
├─ ASP.NET WebForm (IIS托管)
├─ SQL Server (元数据存储)
└─ 文件系统 (物理存储)
选择WebUploader而非H5原生方案的核心原因在于：
- 完美兼容IE8的Flash上传模式
- 内置分片上传、MD5校验、进度控制等企业级功能
- 支持文件夹层级结构保持（通过webkitdirectory属性）
2.2 文件传输流程设计
完整的上传时序包含以下关键阶段：
-
预处理阶段：
- 前端计算文件MD5作为唯一标识
- 按2MB分片并记录分片索引
- 使用AES-256加密每个分片
-
传输阶段：
- 并发上传分片（默认3个并行线程）
- 实时记录已上传分片到localStorage
- 异常自动重试（3次重试机制）
-
后处理阶段：
- 服务端校验所有分片完整性
- 合并分片并解密存储
- 更新数据库文件记录
3. 前端实现细节
3.1 WebUploader初始化配置
javascript复制this.uploader = WebUploader.create({
swf: '/static/webuploader/Uploader.swf', // Flash插件路径
server: '/handlers/UploadHandler.ashx', // 服务端接口
pick: '#filePicker', // 文件选择按钮
dnd: '#dndArea', // 拖拽区域
disableGlobalDnd: true, // 禁用浏览器默认拖拽
chunked: true, // 启用分片
chunkSize: this.chunkSize, // 分片大小
threads: 3, // 并发数
formData: { // 固定参数
encryptKey: this.encryptKey
}
});
关键配置说明：
- IE8下必须正确配置swf路径且服务器需提供crossdomain.xml
- chunkSize建议2MB：过小会增加请求次数，过大会导致IE8超时
- 生产环境encryptKey应从用户输入获取而非硬编码
3.2 文件夹结构保持方案
现代浏览器通过webkitdirectory属性获取完整目录树：
javascript复制// Vue模板
<input
type="file"
@change="handleFolderSelect"
webkitdirectory
directory
multiple
>
// 处理方法
handleFolderSelect(e) {
const files = e.target.files;
this.traverseFiles(files, '');
}
traverseFiles(files, relative