企业官网建设流程全解析

工信部做网站认证吗,江苏齐力建设集团网站,股票可以做网站推广吗,价格低的英文怎么说开发者日记#xff1a;毕业设计大文件管理系统开发实录 日期#xff1a;2023年11月20日 天气#xff1a;多云转晴 作为一名即将毕业的软件工程学生#xff0c;我的毕业设计选题是基于WebUploader的大文件管理系统#xff0c;要求支持20GB文件传输、文件夹层级结构保留毕业设计大文件管理系统开发实录日期2023年11月20日天气多云转晴作为一名即将毕业的软件工程学生我的毕业设计选题是基于WebUploader的大文件管理系统要求支持20GB文件传输、文件夹层级结构保留并兼容IE8及国产信创浏览器如龙芯浏览器、红莲花浏览器。经过两周的技术攻关现将关键实现细节和代码片段整理如下供同样面临毕业设计挑战的同学参考。一、技术选型与兼容性方案前端框架Vue3 CLIWebUploader主方案 HTML5 File API备选浏览器兼容性IE8使用webuploader.flashonly.jsbabel/polyfill国产浏览器测试发现红莲花浏览器需禁用directory属性改用递归上传后端架构PHP 8.0阿里云OSS SDK分片上传固定5MB分片支持断点续传MD5秒传通过文件哈希去重存储方案阿里云OSS存储文件本体MySQL记录元数据文件路径、分片状态、用户权限二、核心代码实现1. 前端兼容性处理Vue3组件// src/components/FileUploader.vueimportWebUploaderfromwebuploader;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.directoryfalse;// 禁用文件夹拖拽uploaderConfig.dndfalse;// 禁用HTML5拖放}constuploaderWebUploader.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 APIconstentriesawaitthis.readDirectory(rootFile);entries.forEach(entry{if(entry.isFile){this.uploadSingleFile(entry,rootFile.relativePath);}});}}};2. 后端分片处理PHP// api/upload.phpyour-aliyun-key,accessKeySecretyour-aliyun-secret,endpointoss-cn-hangzhou.aliyuncs.com,bucketyour-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$pdonewPDO(mysql:hostlocalhost;dbnamefile_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){$ossPathusers/{$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([statuscompleted,path$ossPath]);}else{echojson_encode([statuspending]);}}functionmergeChunks($md5,$chunks,$ossPath,$config){$ossClientnewOssClient($config[accessKeyId],$config[accessKeySecret],$config[endpoint]);$tempFile/tmp/{$md5}_merged;// 合并本地分片for($i0;$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($i0;$i$chunks;$i)unlink(/tmp/chunks/{$md5}_{$i});}3. MySQL表设计关键表-- 文件分片状态表CREATETABLEfile_chunks(idINTAUTO_INCREMENTPRIMARYKEY,md5CHAR(32)NOTNULLCOMMENT文件MD5,chunk_indexINTNOTNULLCOMMENT分片序号,user_idINTNOTNULLCOMMENT所属用户,created_atTIMESTAMPDEFAULTCURRENT_TIMESTAMP,UNIQUEKEYmd5_chunk(md5,chunk_index));-- 文件元数据表CREATETABLEfiles(idINTAUTO_INCREMENTPRIMARYKEY,nameVARCHAR(255)NOTNULLCOMMENT文件名,pathVARCHAR(512)NOTNULLCOMMENTOSS存储路径,md5CHAR(32)NOTNULLCOMMENT文件哈希,sizeBIGINTNOTNULLCOMMENT文件大小,user_idINTNOTNULLCOMMENT上传用户,created_atTIMESTAMPDEFAULTCURRENT_TIMESTAMP);三、关键问题与解决方案IE8文件夹上传方案禁用directory属性改用Flash版WebUploader的普通文件选择代码通过实现多选文件红莲花浏览器兼容性问题拖拽上传会触发浏览器崩溃解决检测到红莲花浏览器时隐藏拖拽区域20GB文件内存优化前端始终使用FileReader.readAsArrayBuffer分片读取后端PHP配置upload_max_filesize 0由分片逻辑接管四、毕业设计特色功能信创浏览器适配通过User-Agent自动切换兼容模式// utils/browserDetect.jsexportfunctionisLoongBrowser(){returnnavigator.userAgent.includes(LoongBrowser);}管理员监控面板基于Vue3 ECharts实现上传速度实时图表安全增强文件下载需携带JWT令牌阿里云OSS配置Bucket Policy限制访问寻求帮助目前国产浏览器如奇安信在文件夹上传时存在路径解析异常欢迎加入QQ群374992201指导调试今日进度完成基础分片上传明日将攻克信创浏览器兼容性问题。签名浙江某高校 · 软件工程1901班 · 张明2023年11月20日 夜附项目地址GitHub待开源https://github.com/graduation-project/file-manager演示视频项目根目录/demo/文件夹内致谢感谢群里王工提供的国产浏览器测试环境以及李学长分享的阿里云OSS断点续传方案安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。免费下载示例点击下载完整示例