news 2026/7/4 15:36:13

PHP教育行业大文件上传进度条怎么实现？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
PHP教育行业大文件上传进度条怎么实现？

开发者日记：毕业设计大文件管理系统开发实录
日期：2023年11月20日
天气：多云转晴

作为一名即将毕业的软件工程学生，我的毕业设计选题是基于WebUploader的大文件管理系统，要求支持20GB文件传输、文件夹层级结构保留，并兼容IE8及国产信创浏览器（如龙芯浏览器、红莲花浏览器）。经过两周的技术攻关，现将关键实现细节和代码片段整理如下，供同样面临毕业设计挑战的同学参考。

一、技术选型与兼容性方案

  1. 前端框架

    • Vue3 CLI+WebUploader（主方案） +HTML5 File API（备选）
    • 浏览器兼容性：
      • IE8：使用webuploader.flashonly.js+@babel/polyfill
      • 国产浏览器：测试发现红莲花浏览器需禁用directory属性，改用递归上传

  2. 后端架构

    • PHP 8.0+阿里云OSS SDK
    • 分片上传：固定5MB分片，支持断点续传
    • MD5秒传：通过文件哈希去重

  3. 存储方案

    • 阿里云OSS存储文件本体
    • MySQL记录元数据（文件路径、分片状态、用户权限）

二、核心代码实现

1. 前端兼容性处理（Vue3组件）
// src/components/FileUploader.vueimportWebUploaderfrom'webuploader';import{isIE8,isLoongBrowser}from'@/utils/browserDetect';exportdefault{mounted(){constuploaderConfig={swf:'/static/Uploader.swf',// IE8必需server:'/api/upload',pick:'#picker',accept:{title:'All',extensions:'*'},compress:false,chunked:true,chunkSize:5*1024*1024,// 5MB分片threads:3,formData:{token:localStorage.getItem('upload_token')}};// 国产浏览器降级方案if(isLoongBrowser()||isIE8()){uploaderConfig.directory=false;// 禁用文件夹拖拽uploaderConfig.dnd=false;// 禁用HTML5拖放}constuploader=WebUploader.create(uploaderConfig);// 文件夹递归上传（非IE8环境）if(!isIE8()){uploader.on('beforeFileQueued',(file)=>{if(file.relativePath){this.uploadFolder(file);returnfalse;// 阻止默认队列行为}});}// 分片上传进度uploader.on('uploadProgress',(file,percentage)=>{this.$emit('progress',{name:file.name,progress:percentage});});},methods:{asyncuploadFolder(rootFile){// 递归解析文件夹结构（需配合HTML5 File API）constentries=awaitthis.readDirectory(rootFile);entries.forEach(entry=>{if(entry.isFile){this.uploadSingleFile(entry,rootFile.relativePath);}});}}};
2. 后端分片处理（PHP）
// api/upload.php'your-aliyun-key','accessKeySecret'=>'your-aliyun-secret','endpoint'=>'oss-cn-hangzhou.aliyuncs.com','bucket'=>'your-bucket-name'];// 处理分片上传if($_SERVER['REQUEST_METHOD']==='POST'){$chunk=$_POST['chunk']??0;$chunks=$_POST['chunks']??1;$md5=$_POST['md5']??'';$relativePath=$_POST['relativePath']??'';$userId=$_SESSION['user_id']??0;// 存储临时分片$chunkPath="/tmp/chunks/{$md5}_{$chunk}";move_uploaded_file($_FILES['file']['tmp_name'],$chunkPath);// 记录分片状态到MySQL$pdo=newPDO('mysql:host=localhost;dbname=file_manager','user','password');$stmt=$pdo->prepare("REPLACE INTO file_chunks (md5, chunk_index, user_id) VALUES (?, ?, ?)");$stmt->execute([$md5,$chunk,$userId]);// 合并分片（最后一个分片）if($chunk==$chunks-1){$ossPath="users/{$userId}/{$relativePath}".basename($_POST['name']);$this->mergeChunks($md5,$chunks,$ossPath,$config);// 记录完整文件信息$fileStmt=$pdo->prepare("INSERT INTO files (name, path, md5, size, user_id) VALUES (?, ?, ?, ?, ?)");$fileStmt->execute([$_POST['name'],$ossPath,$md5,$_POST['size'],$userId]);echojson_encode(['status'=>'completed','path'=>$ossPath]);}else{echojson_encode(['status'=>'pending']);}}functionmergeChunks($md5,$chunks,$ossPath,$config){$ossClient=newOssClient($config['accessKeyId'],$config['accessKeySecret'],$config['endpoint']);$tempFile="/tmp/{$md5}_merged";// 合并本地分片for($i=0;$i<$chunks;$i++){file_put_contents($tempFile,file_get_contents("/tmp/chunks/{$md5}_{$i}"),FILE_APPEND);}// 上传至阿里云OSS$ossClient->uploadFile($config['bucket'],$ossPath,$tempFile);// 清理临时文件unlink($tempFile);for($i=0;$i<$chunks;$i++)unlink("/tmp/chunks/{$md5}_{$i}");}
3. MySQL表设计（关键表）
-- 文件分片状态表CREATETABLE`file_chunks`(`id`INTAUTO_INCREMENTPRIMARYKEY,`md5`CHAR(32)NOTNULLCOMMENT'文件MD5',`chunk_index`INTNOTNULLCOMMENT'分片序号',`user_id`INTNOTNULLCOMMENT'所属用户',`created_at`TIMESTAMPDEFAULTCURRENT_TIMESTAMP,UNIQUEKEY`md5_chunk`(`md5`,`chunk_index`));-- 文件元数据表CREATETABLE`files`(`id`INTAUTO_INCREMENTPRIMARYKEY,`name`VARCHAR(255)NOTNULLCOMMENT'文件名',`path`VARCHAR(512)NOTNULLCOMMENT'OSS存储路径',`md5`CHAR(32)NOTNULLCOMMENT'文件哈希',`size`BIGINTNOTNULLCOMMENT'文件大小',`user_id`INTNOTNULLCOMMENT'上传用户',`created_at`TIMESTAMPDEFAULTCURRENT_TIMESTAMP);

三、关键问题与解决方案

  1. IE8文件夹上传

    • 方案：禁用directory属性，改用Flash版WebUploader的普通文件选择
    • 代码：通过``实现多选文件

  2. 红莲花浏览器兼容性

    • 问题：拖拽上传会触发浏览器崩溃
    • 解决：检测到红莲花浏览器时隐藏拖拽区域

  3. 20GB文件内存优化

    • 前端：始终使用FileReader.readAsArrayBuffer分片读取
    • 后端：PHP配置upload_max_filesize = 0（由分片逻辑接管）

四、毕业设计特色功能

  1. 信创浏览器适配

    • 通过User-Agent自动切换兼容模式
    // utils/browserDetect.jsexportfunctionisLoongBrowser(){returnnavigator.userAgent.includes('LoongBrowser');}

  2. 管理员监控面板

    • 基于Vue3 + ECharts实现上传速度实时图表

  3. 安全增强

    • 文件下载需携带JWT令牌
    • 阿里云OSS配置Bucket Policy限制访问

寻求帮助：目前国产浏览器（如奇安信）在文件夹上传时存在路径解析异常，欢迎加入QQ群374992201指导调试！

今日进度：完成基础分片上传，明日将攻克信创浏览器兼容性问题。

（签名）
浙江某高校 · 软件工程1901班 · 张明
2023年11月20日 夜

附：项目地址
GitHub（待开源）：https://github.com/graduation-project/file-manager
演示视频：项目根目录/demo/文件夹内

致谢：感谢群里王工提供的国产浏览器测试环境，以及李学长分享的阿里云OSS断点续传方案！

安装环境

PHP:7.2.14

调整块大小

NOSQL

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

SQL

创建数据库

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

配置数据库连接

安装依赖

访问页面进行测试

数据表中的数据

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

免费下载示例

点击下载完整示例

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/1 23:17:53

高危安全污染！研究曝大语言模型训练集暗藏超1.2万个密钥与密码

训练集中发现有效认证信息 用于训练大语言模型&#xff08;LLMs&#xff09;的数据集中被发现包含近1.2万个有效的密钥信息&#xff0c;这些密钥可以成功进行身份验证。 这一发现再次凸显了硬编码凭证给用户和组织带来的严重安全风险&#xff0c;尤其是当大语言模型最终向用户…

作者头像 李华
网站建设 2026/7/2 5:20:34

全任务零样本学习-mT5中文增强版：批量文本处理实战案例分享

全任务零样本学习-mT5中文增强版&#xff1a;批量文本处理实战案例分享 这不是又一个“微调后能用”的模型&#xff0c;而是一个开箱即用、不依赖标注数据、专为中文场景打磨的文本增强引擎。 它基于mT5架构&#xff0c;但关键差异在于&#xff1a;不靠下游任务微调&#xff0…

作者头像 李华
网站建设 2026/7/2 3:37:31

智谱AI GLM-Image测评：轻松生成8K级精美图片

智谱AI GLM-Image测评&#xff1a;轻松生成8K级精美图片 你有没有试过这样的情景&#xff1a;刚想到一个绝妙的视觉创意&#xff0c;比如“赛博朋克风格的江南水乡&#xff0c;霓虹倒映在青石板路上&#xff0c;雨丝斜织&#xff0c;无人机视角俯拍”&#xff0c;却卡在了找图…

作者头像 李华
网站建设 2026/6/26 18:23:25

PyTorch2.2工业级落地全流程：AOTInductor编译+TensorRT优化实战

前言&#xff1a;作为深耕工业级深度学习落地的开发者&#xff0c;我踩过最坑的坑是——用PyTorch2.x训练的模型&#xff0c;实验室里推理速度勉强达标&#xff0c;放到工业生产环境直接“拉胯”&#xff1a;要么torch.compile加速效果打折扣&#xff0c;要么TensorRT优化后精度…

作者头像 李华