企业官网建设流程全解析

有了域名和空间怎么建网站,打开百度浏览器,seo服务理念,felis wordpress开发者日记#xff1a;2024年X月X日 星期X 长沙 阴 项目背景 今日正式接手客户的大文件传输系统外包项目#xff0c;需求明确#xff1a;支持20G文件/文件夹上传下载、跨平台#xff08;Windows/macOS/Linux#xff09;、全浏览器兼容#xff08;含IE8#xff09;、断点…开发者日记2024年X月X日 星期X 长沙 阴项目背景今日正式接手客户的大文件传输系统外包项目需求明确支持20G文件/文件夹上传下载、跨平台Windows/macOS/Linux、全浏览器兼容含IE8、断点续传、保留文件夹层级结构后端PHPMySQL前端Vue3WebUploader/H5存储用阿里云OSS。客户要求免费开源代码和7*24小时支持压力山大但挑战性十足。技术选型与难点分析前端框架Vue3 CLI组件化开发响应式数据绑定。WebUploader兼容IE8支持分片上传但需二次开发文件夹上传。H5 File API现代浏览器备用方案需Polyfill兼容旧版。后端架构PHP轻量级处理文件分片合并与OSS交互。MySQL存储文件元数据路径、分片信息、断点记录。核心难点文件夹层级保留需递归解析文件夹结构生成JSON树形结构上传。断点续传通过本地StorageServer记录分片上传进度重启后恢复。大文件分片前端按4MB分片后端合并后上传OSS。前端代码实现Vue3 WebUploader1. 初始化WebUploader兼容IE8// src/components/Uploader.vueimport{onMounted,ref}fromvue;importWebUploaderfromwebuploader;importwebuploader/dist/webuploader.css;exportdefault{setup(){constuploaderref(null);onMounted((){// 动态加载FlashIE8兼容if(window.WebUploader!WebUploader.Uploader.support(HTML5)){constflashUrl/path/to/Uploader.swf;WebUploader.Uploader.register({name:flash,fn:()flashUrl});}uploader.valuenewWebUploader.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的目录选择APIconstparseDirectory(dirFile){// 此处需结合H5 File System API或插件实现层级解析console.log(Folder structure:,dirFile.fullPath);};return{uploader};}};2. 文件夹上传逻辑H5 Fallback// 兼容现代浏览器的文件夹上传IE8跳过consthandleFolderInput(event){if(!window.Filewindow.DirectoryReader)return;// 检测H5 API支持constfiles[];constdirectoryReaderevent.target.webkitGetAsEntry();// Chrome/Firefoxif(directoryReaderdirectoryReader.isDirectory){constreaderdirectoryReader.createReader();reader.readEntries((entries){entries.forEach(entry{if(entry.isFile){entry.file(filefiles.push(file));}elseif(entry.isDirectory){// 递归处理子目录handleFolderInput({target:{webkitGetAsEntry:()entry}});}});});}};后端代码实现PHP MySQL1. 分片接收与合并// 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;$fpfopen($finalPath,wb);for($i0;$i$totalChunks;$i){$chunkContentfile_get_contents({$tempDir}/chunk_{$i});fwrite($fp,$chunkContent);}fclose($fp);// 上传到阿里云OSS需引入OSS SDKrequire_onceoss-sdk/autoload.php;$ossClientnewOSS\OssClient(key,secret,endpoint);$ossClient-putObject(bucket-name,uploads/{$fileId},$finalPath);// 清理临时文件array_map(unlink,glob({$tempDir}/*));rmdir($tempDir);}echojson_encode([successtrue,fileId$fileId]);?2. MySQL表结构CREATETABLEupload_progress(idINTAUTO_INCREMENTPRIMARYKEY,file_idVARCHAR(64)NOTNULL,chunk_indexINTNOTNULL,total_chunksINTNOTNULL,uploaded_atDATETIMENOTNULL,UNIQUEKEY(file_id,chunk_index));断点续传实现前端存储使用localStorage记录未完成的fileId和chunkIndex。后端查询上传前检查MySQL中已存在的分片跳过已上传部分。// 前端恢复上传逻辑constresumeUpload(fileId){fetch(/api/check-progress?fileId${fileId}).then(resres.json()).then(data{if(data.completedChunksdata.totalChunks){uploader.value.option(formData,{fileId,chunk:data.completedChunks});uploader.value.upload();}});};今日总结进展完成基础分片上传逻辑兼容性方案初步验证。问题WebUploader原生不支持文件夹层级解析需结合H5 API或第三方插件如webuploader-directory。IE8的Flash上传稳定性需进一步测试。明日计划实现完整的文件夹递归上传逻辑。编写OSS上传模块和断点续传接口。求助若有大神熟悉WebUploader文件夹上传或OSS集成欢迎加入QQ群374992201指导代码将完全开源回馈社区。注实际项目需补充安全校验、错误处理和性能优化代码。安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。免费下载示例点击下载完整示例