PHP国防军工大附件上传时进度条如何设计？

2023年10月25日 星期三 多云转晴
毕业设计攻坚日记 - 大文件管理系统Day1

需求分析与技术选型

今天正式启动文件管理系统的毕业设计。核心需求很明确：

1. 大文件传输：10G文件需分片上传，需兼容IE8（地狱级难度）
2. 加密：传输层TLS+存储层AES-256双重加密
3. 断点续传：浏览器关闭后进度不丢失（IndexedDB+LocalStorage降级方案）
4. 文件夹结构：递归读取+路径映射表

技术组合：

• 前端：Vue3 CLI + WebUploader（兼容H5 fallback）
• 后端：PHP分片合并 + OSS直传签名
• 数据库：MySQL记录文件元信息

关键代码片段

前端：分片上传逻辑（WebUploader + IndexedDB）

// WebUploader初始化（兼容IE8）constuploader=WebUploader.create({server:'/api/upload_chunk.php',fileSizeLimit:10*1024*1024*1024,// 10GBchunkSize:5*1024*1024,// 5MB分片duplicate:true,disableGlobalDnd:true,// IE8必须prepareNextFile:true});// 断点信息存储（优先IndexedDB）functionsaveProgress(fileId,chunks){if('indexedDB'inwindow){constdbRequest=indexedDB.open('UploadDB',1);dbRequest.onsuccess=(e)=>{constdb=e.target.result;consttx=db.transaction('progress','readwrite');tx.objectStore('progress').put({fileId,chunks});};}else{localStorage.setItem(`upload_${fileId}`,JSON.stringify(chunks));}}

后端：PHP分片合并（OSS直传优化）

// upload_chunk.php$fileId=$_POST['fileId'];$chunkIndex=$_POST['chunkIndex'];$totalChunks=$_POST['totalChunks'];// 加密分片存储（AES-256-CBC）$encryptedChunk=openssl_encrypt(file_get_contents($_FILES['file']['tmp_name']),'aes-256-cbc','your_encryption_key',0,'initialization_vector');file_put_contents("/tmp/{$fileId}_{$chunkIndex}.part",$encryptedChunk);// 判断是否合并if($chunkIndex==$totalChunks-1){$ossClient=newOSS\OssClient(/* OSS配置 */);$finalPath="/user_uploads/{$fileId}.dat";// 合并所有分片for($i=0;$i<$totalChunks;$i++){$chunkData=file_get_contents("/tmp/{$fileId}_{$i}.part");file_put_contents("/tmp/{$fileId}_final",$chunkData,FILE_APPEND);}// 上传至OSS$ossClient->uploadFile('your-bucket',$finalPath,"/tmp/{$fileId}_final");echojson_encode(['status'=>'success']);}

今日踩坑记录

1. IE8兼容性问题：

   • WebUploader的Flash模式需要手动部署swf文件
   • 解决方案：在public目录放置webuploader.flash.swf并配置swf: '/static/webuploader.flash.swf'

2. 文件夹结构递归：

   • 使用webkitRelativePath属性获取相对路径（非IE浏览器）
   • IE8需通过``的替代方案（已放弃，改用Zip预处理）

明日计划

1. 实现离线进度恢复的完整Demo
2. 研究国产浏览器（龙芯/红莲花）的测试方案
3. 联系校友群（已加QQ群374992201）询问工作内推

PS：有西安华为OD的学长联系我，要求提供毕业设计演示视频——得加快进度了！

（日记风格建议：技术细节+个人情绪+进度追踪，保持真实感）

如果需要更完整的代码库或架构设计图，可以进一步讨论！

安装环境

PHP:7.2.14

调整块大小

NOSQL

NOSQL不需要任何配置，可以直接访问测试

SQL

创建数据库

您可以直接复制脚本进行创建

配置数据库连接

安装依赖

访问页面进行测试

数据表中的数据

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

免费下载示例

点击下载完整示例