给个手机网站就这么难吗常熟网站

张

张建站

2026/4/8 14:39:26

10分钟阅读

给个手机网站就这么难吗,常熟网站,今天足球比赛推荐,广告网站怎么做开发者日记#xff1a;2023年X月X日星期X 武汉阴项目背景今日正式启动客户的大文件传输系统项目#xff0c;需求明确#xff1a;支持20G文件/文件夹上传下载、跨平台#xff08;Windows/macOS/Linux#xff09;、全浏览器兼容#xff08;含IE8#xff09;、断点续传…开发者日记2023年X月X日星期X 武汉阴项目背景今日正式启动客户的大文件传输系统项目需求明确支持20G文件/文件夹上传下载、跨平台Windows/macOS/Linux、全浏览器兼容含IE8、断点续传、保留文件夹层级结构。后端使用PHP MySQL存储用阿里云OSS前端为Vue3 CLI WebUploader/H5。客户强调高频文件夹上传场景需极致优化用户体验。免费开源代码和7*24支持的压力依旧但技术栈熟悉度较高信心渐增。技术选型与调整前端框架Vue3 CLI组件化开发配合babel/polyfill兼容IE8。WebUploader核心上传组件深度定制文件夹解析逻辑。H5 File API现代浏览器备用方案IE8回退到Flash上传。后端架构PHP 8.1处理分片上传、MySQL元数据存储、OSS直传。MySQL 8.0存储文件路径、分片状态、用户IDInnoDB引擎保证事务。核心难点高频文件夹上传优化递归解析性能避免前端卡顿。断点续传稳定性MySQL事务保证分片记录一致性。IE8兼容性Flash上传需处理跨域问题crossdomain.xml。前端代码实现Vue3 WebUploader1. 文件夹上传组件// src/components/FolderUploader.vueimport{ref,onMounted}fromvue;importWebUploaderfromwebuploader;importwebuploader/dist/webuploader.css;exportdefault{setup(){constuploaderref(null);constfolderTreeref([]);onMounted((){// 动态加载FlashIE8兼容if(!WebUploader.Uploader.support(HTML5)){WebUploader.Uploader.register({name:flash,fn:()/assets/Uploader.swf});}uploader.valuenewWebUploader.Uploader({swf:/assets/Uploader.swf,server:/api/upload.php,chunked:true,chunkSize:4*1024*1024,// 4MB分片formData:{fileId:,relativePath:// 关键记录文件相对路径}});});consttriggerFolderInput(){document.getElementById(folderInput).click();};// 递归解析文件夹兼容现代浏览器consthandleFolderSelect(e){constitemse.target.files;if(items){consttree[];for(leti0;iitems.length;i){constfileitems[i];constpathfile.webkitRelativePath||file.name;// 相对路径constsegmentspath.split(/);// 构建树形结构letcurrentLeveltree;segments.slice(0,-1).forEach(segment{letdircurrentLevel.find(itemitem.namesegment);if(!dir){dir{name:segment,type:directory,children:[]};currentLevel.push(dir);}currentLeveldir.children;});// 添加文件节点currentLevel.push({name:segments.pop(),type:file,file:file,relativePath:path});}folderTree.valuetree;uploadFolder(tree);}};// 上传文件夹内容constuploadFolder(tree){tree.forEach(node{if(node.typedirectory){uploadFolder(node.children);// 递归上传子目录}else{constformDatauploader.value.option(formData);formData.relativePathnode.relativePath;uploader.value.addFile(node.file,node.relativePath);}});uploader.value.upload();// 触发上传};return{triggerFolderInput,folderTree};}};2. IE8兼容性处理后端代码实现PHP MySQL1. 分片上传接口setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);$stmt$pdo-prepare( INSERT INTO upload_progress (file_id, chunk_index, total_chunks, uploaded_at) VALUES (?, ?, ?, NOW()) ON DUPLICATE KEY UPDATE updated_at NOW() );$stmt-execute([$fileId,$chunkIndex,$totalChunks]);// 如果是最后一块合并并上传OSSif($chunkIndex$totalChunks-1){$finalPath{$tempDir}/final_file;$fpfopen($finalPath,wb);for($i0;$i$totalChunks;$i){$chunkfile_get_contents({$tempDir}/chunk_{$i});fwrite($fp,$chunk);}fclose($fp);// 上传OSS需引入阿里云OSS SDKrequire_onceoss-sdk/autoload.php;$ossClientnewOSS\OssClient($OSS_KEY,$OSS_SECRET,$OSS_ENDPOINT);$ossClient-putObject($OSS_BUCKET,uploads/{$fileId},$finalPath);// 清理临时文件array_map(unlink,glob({$tempDir}/*));rmdir($tempDir);// 保存文件元数据到MySQL$metaStmt$pdo-prepare( INSERT INTO file_metadata (file_id, relative_path, size, uploaded_at) VALUES (?, ?, ?, NOW()) );$metaStmt-execute([$fileId,$relativePath,filesize($finalPath)]);}echojson_encode([successtrue,fileId$fileId]);}catch(Exception$e){http_response_code(500);echojson_encode([error$e-getMessage()]);}?2. MySQL表结构-- 文件分片进度表CREATETABLEupload_progress(idint(11)NOTNULLAUTO_INCREMENT,file_idvarchar(64)NOTNULLCOMMENT文件唯一ID,chunk_indexint(11)NOTNULLCOMMENT分片索引,total_chunksint(11)NOTNULLCOMMENT总分片数,uploaded_atdatetimeNOTNULLDEFAULTCURRENT_TIMESTAMP,updated_atdatetimeNOTNULLDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,PRIMARYKEY(id),UNIQUEKEYidx_file_chunk(file_id,chunk_index))ENGINEInnoDBDEFAULTCHARSETutf8mb4;-- 文件元数据表CREATETABLEfile_metadata(idint(11)NOTNULLAUTO_INCREMENT,file_idvarchar(64)NOTNULLCOMMENT文件唯一ID,relative_pathvarchar(512)NOTNULLCOMMENT文件相对路径,sizebigint(20)NOTNULLCOMMENT文件大小(字节),uploaded_atdatetimeNOTNULLDEFAULTCURRENT_TIMESTAMP,PRIMARYKEY(id),UNIQUEKEYidx_file_path(file_id,relative_path))ENGINEInnoDBDEFAULTCHARSETutf8mb4;断点续传实现1. 前端恢复逻辑// 检查未完成上传constcheckResumeasync(fileId){constresawaitfetch(/api/progress.php?fileId${fileId});constdataawaitres.json();if(data.completedChunksdata.totalChunks){uploader.value.option(formData,{fileId,chunk:data.completedChunks});uploader.value.upload();}};// 本地存储fileId即使浏览器关闭window.addEventListener(beforeunload,(){if(uploader.value.getFiles().length0){localStorage.setItem(lastUploadId,uploader.value.option(formData).fileId);}});2. 后端进度查询fileId is required]);exit;}try{$pdonewPDO(mysql:host{$DB_HOST};dbname{$DB_NAME},$DB_USER,$DB_PASS);$stmt$pdo-prepare( SELECT COUNT(*) AS completed, MAX(total_chunks) AS total FROM upload_progress WHERE file_id ? );$stmt-execute([$fileId]);$result$stmt-fetch(PDO::FETCH_ASSOC);echojson_encode([completedChunks(int)$result[completed],totalChunks(int)$result[total]]);}catch(Exception$e){http_response_code(500);echojson_encode([error$e-getMessage()]);}?今日总结进展完成文件夹层级解析和PHP分片上传逻辑IE8兼容性方案验证通过。问题WebUploader在IE8下对大文件夹性能较差需优化DOM操作。MySQL事务需加强避免分片记录残留。明日计划实现OSS分片上传避免本地合并临时文件。编写完整的开发文档和API接口说明。求助若有熟悉PHP文件处理或MySQL优化的高手欢迎加入QQ群374992201指导代码将完全开源回馈社区。注实际项目需补充安全校验、OSS直传和性能监控代码。安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。免费下载示例点击下载完整示例