吴忠市网站建设_网站建设公司_Java_seo优化

开发者日记：2024年X月X日 星期X 长沙 阴

项目背景
今日正式接手客户的大文件传输系统外包项目，需求明确：支持20G文件/文件夹上传下载、跨平台（Windows/macOS/Linux）、全浏览器兼容（含IE8）、断点续传、保留文件夹层级结构，后端PHP+MySQL，前端Vue3+WebUploader/H5，存储用阿里云OSS。客户要求免费开源代码和7*24小时支持，压力山大但挑战性十足。

技术选型与难点分析

1. 前端框架

   • Vue3 CLI：组件化开发，响应式数据绑定。
   • WebUploader：兼容IE8+，支持分片上传，但需二次开发文件夹上传。
   • H5 File API：现代浏览器备用方案，需Polyfill兼容旧版。

2. 后端架构

   • PHP：轻量级处理文件分片合并与OSS交互。
   • MySQL：存储文件元数据（路径、分片信息、断点记录）。

3. 核心难点

   • 文件夹层级保留：需递归解析文件夹结构，生成JSON树形结构上传。
   • 断点续传：通过本地Storage+Server记录分片上传进度，重启后恢复。
   • 大文件分片：前端按4MB分片，后端合并后上传OSS。

前端代码实现（Vue3 + WebUploader）

1. 初始化WebUploader（兼容IE8）

// src/components/Uploader.vueimport{onMounted,ref}from'vue';importWebUploaderfrom'webuploader';import'webuploader/dist/webuploader.css';exportdefault{setup(){constuploader=ref(null);onMounted(()=>{// 动态加载Flash（IE8兼容）if(window.WebUploader&&!WebUploader.Uploader.support('HTML5')){constflashUrl='/path/to/Uploader.swf';WebUploader.Uploader.register({name:'flash',fn:()=>flashUrl});}uploader.value=newWebUploader.Uploader({swf:'/path/to/Uploader.swf',// IE8备用server:'/api/upload',pick:'#picker',chunked:true,chunkSize:4*1024*1024,// 4MB分片threads:3,formData:{fileId:'',// 由后端生成唯一IDisDir:false// 标记是否为文件夹},// 保留文件夹结构的关键：自定义文件对象accept:{title:'Files',extensions:'*',mimeTypes:'*'}});// 监听文件添加（处理文件夹）uploader.value.on('filesQueued',(files)=>{files.forEach(file=>{if(file.isDir){// 递归处理文件夹（需自定义逻辑）parseDirectory(file);}else{uploadFile(file);}});});});// 模拟文件夹解析（实际需调用WebUploader的目录选择API）constparseDirectory=(dirFile)=>{// 此处需结合H5 File System API或插件实现层级解析console.log('Folder structure:',dirFile.fullPath);};return{uploader};}};

2. 文件夹上传逻辑（H5 Fallback）

// 兼容现代浏览器的文件夹上传（IE8跳过）consthandleFolderInput=(event)=>{if(!window.File&&window.DirectoryReader)return;// 检测H5 API支持constfiles=[];constdirectoryReader=event.target.webkitGetAsEntry();// Chrome/Firefoxif(directoryReader&&directoryReader.isDirectory){constreader=directoryReader.createReader();reader.readEntries((entries)=>{entries.forEach(entry=>{if(entry.isFile){entry.file(file=>files.push(file));}elseif(entry.isDirectory){// 递归处理子目录handleFolderInput({target:{webkitGetAsEntry:()=>entry}});}});});}};

后端代码实现（PHP + MySQL）

1. 分片接收与合并

// api/upload.phpprepare("INSERT INTO upload_progress (file_id, chunk_index, total_chunks, uploaded_at) VALUES (?, ?, ?, NOW())");$stmt->execute([$fileId,$chunkIndex,$totalChunks]);// 如果是最后一块，合并并上传OSSif($chunkIndex===$totalChunks-1){$finalPath="{$tempDir}/final_file";$fp=fopen($finalPath,'wb');for($i=0;$i<$totalChunks;$i++){$chunkContent=file_get_contents("{$tempDir}/chunk_{$i}");fwrite($fp,$chunkContent);}fclose($fp);// 上传到阿里云OSS（需引入OSS SDK）require_once'oss-sdk/autoload.php';$ossClient=newOSS\OssClient('key','secret','endpoint');$ossClient->putObject('bucket-name',"uploads/{$fileId}",$finalPath);// 清理临时文件array_map('unlink',glob("{$tempDir}/*"));rmdir($tempDir);}echojson_encode(['success'=>true,'fileId'=>$fileId]);?>

2. MySQL表结构

CREATETABLEupload_progress(idINTAUTO_INCREMENTPRIMARYKEY,file_idVARCHAR(64)NOTNULL,chunk_indexINTNOTNULL,total_chunksINTNOTNULL,uploaded_atDATETIMENOTNULL,UNIQUEKEY(file_id,chunk_index));

断点续传实现

1. 前端存储：使用localStorage记录未完成的fileId和chunkIndex。
2. 后端查询：上传前检查MySQL中已存在的分片，跳过已上传部分。

// 前端恢复上传逻辑constresumeUpload=(fileId)=>{fetch(`/api/check-progress?fileId=${fileId}`).then(res=>res.json()).then(data=>{if(data.completedChunks<data.totalChunks){uploader.value.option('formData',{fileId,chunk:data.completedChunks});uploader.value.upload();}});};

今日总结

• 进展：完成基础分片上传逻辑，兼容性方案初步验证。
• 问题：
  1. WebUploader原生不支持文件夹层级解析，需结合H5 API或第三方插件（如webuploader-directory）。
  2. IE8的Flash上传稳定性需进一步测试。
• 明日计划：
  1. 实现完整的文件夹递归上传逻辑。
  2. 编写OSS上传模块和断点续传接口。

求助：若有大神熟悉WebUploader文件夹上传或OSS集成，欢迎加入QQ群374992201指导！代码将完全开源回馈社区。

（注：实际项目需补充安全校验、错误处理和性能优化代码。）

安装环境

PHP:7.2.14

调整块大小

NOSQL

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

SQL

创建数据库

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

配置数据库连接

安装依赖

访问页面进行测试

数据表中的数据

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

免费下载示例

点击下载完整示例