2023年XX月XX日 开发日志 - 大文件传输系统攻坚实录
(关键词:20GB文件传输/文件夹层级保持/全浏览器兼容/断点续传)
晨间需求分析
客户需求本质是**“非结构化数据的可靠传输”**,技术难点集中在:
- 文件夹结构序列化(需处理Windows/macOS/Linux路径差异)
- 断点续传的持久化(需考虑浏览器崩溃、系统重启等异常场景)
- IE8兼容性(需降级方案应对不支持File API的浏览器)
注:预算100元实难覆盖开发成本,但可作为技术验证原型。
技术方案选型
核心代码片段
1. 前端文件夹结构采集 (Vue3+WebUploader)
// 文件夹上传元数据生成consttraverseFolder=async(dirHandle)=>{letfileTree={name:dirHandle.name,children:[]};forawait(constentryofdirHandle.values()){if(entry.kind==='file'){fileTree.children.push({name:entry.name,size:(awaitentry.getFile()).size,webkitRelativePath:entry.webkitRelativePath});}else{fileTree.children.push(awaittraverseFolder(entry));}}returnfileTree;}关键点:使用File System Access API获取完整路径信息
2. 断点续传服务端记录 (PHP+MySQL)
// 分片状态记录表结构CREATETABLE`upload_chunks`(`upload_id`VARCHAR(64)PRIMARYKEY,`user_id`INTNOTNULL,`file_path`TEXTCOMMENT'OSS存储路径',`chunk_map`LONGTEXTCOMMENT'JSON格式分片完成状态',`folder_structure`LONGTEXTCOMMENT'原始文件夹结构')ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;// 断点查询接口functiongetUploadProgress($uploadId){$stmt=$pdo->prepare("SELECT chunk_map FROM upload_chunks WHERE upload_id=?");$stmt->execute([$uploadId]);returnjson_decode($stmt->fetchColumn(),true);}3. OSS分片上传签名 (PHP SDK)
useOSS\OssClient;functiongenerateChunkSign($objectPath,$chunkIndex){$client=newOssClient(ACCESS_KEY,SECRET_KEY,ENDPOINT);$options=[OssClient::OSS_PART_NUM=>$chunkIndex,OssClient::OSS_CONTENT_TYPE=>'application/octet-stream'];return$client->generatePresignedUrl(BUCKET,$objectPath,TIMEOUT,'PUT',$options);}浏览器兼容方案对比表
| 特性 | 现代浏览器方案 | IE8降级方案 |
|---|---|---|
| 文件夹选择 | `` | Flash+DirectoryReader |
| 分片上传 | File API | Flash FileReference |
| 进度事件 | ProgressEvent | ExternalInterface回调 |
踩坑预警
- 路径标准化问题
// 统一转换路径分隔符functionnormalizePath(path){returnpath.replace(/\\/g,'/').replace(/\/+/g,'/');} - OSS分片限制
- 单文件最大5TB但分片数不得超过10000
- 20GB文件建议设置分片大小为20MB(需计算:
Math.ceil(20*1024/20)=1024片)
后续计划
- 编写WebWorker后台计算MD5(防止UI阻塞)
- 实现文件夹下载的ZIP流式打包(避免服务端临时文件)
- 压力测试方案设计(模拟1000并发文件夹上传)
注:完整实现需约120小时开发量,建议客户调整预算或简化需求。可提供基础框架供二次开发。
今日总结:技术方案已明确,但需与客户沟通现实可行性。明日将重点突破IE8兼容层实现。
开发者备注:如需进一步讨论实现细节,可参考WebUploader改造指南或联系群内@架构师老王。
安装环境
PHP:7.2.14
调整块大小
NOSQL
NOSQL不需要任何配置,可以直接访问测试
SQL
创建数据库
您可以直接复制脚本进行创建
配置数据库连接
安装依赖
访问页面进行测试
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度,在关闭浏览器,刷新浏览器后进行不丢失,仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构,同样支持进度信息离线保存,刷新页面,关闭页面,重启系统不丢失上传进度。
免费下载示例
点击下载完整示例