企业官网建设流程全解析

东莞企业网站设计公司,网站建设的流程 步骤,运城网站建设维护,公司的网站建设jnzjiPHP程序员外包项目救星#xff1a;原生JS大文件传输系统#xff08;附前后端核心代码#xff09; 兄弟#xff0c;作为在杭州接外包的老PHP程序员#xff0c;太懂你现在的处境了——甲方爸爸要20G大文件上传#xff0c;还要兼容IE8#xff0c;预算卡得死死的#xff0…PHP程序员外包项目救星原生JS大文件传输系统附前后端核心代码兄弟作为在杭州接外包的老PHP程序员太懂你现在的处境了——甲方爸爸要20G大文件上传还要兼容IE8预算卡得死死的网上代码全是“断头路”出了问题连个问的人都没有。别慌我去年接了个类似项目熬了三个月啃下的原生JSPHP全栈方案今天全盘托出保证你能直接拿给客户演示合同签得比隔壁老王还快一、方案核心专治甲方“奇葩需求”1. 功能全覆盖甲方看了直点头20G级大文件传输分片上传5MB/片断点续传MySQL存进度关浏览器/重启电脑不丢。文件夹层级保留递归遍历文件系统后端按/文件夹/子文件路径存储IE8用“伪路径元数据”方案兜底。加密传输存储前端AES加密分片密钥动态生成后端SM4解密存储满足甲方“数据安全”要求。非打包下载流式传输逐个文件几万文件也不卡支持“文件夹结构树”展示。全浏览器兼容IE8隐藏inputFlash模拟、Edge/Chrome/Firefox原生API、信创国产浏览器龙芯/红莲花。2. 成本可控100元预算搞定原生JS实现0商业授权费用开源库CryptoJS代码直接嵌入Vue3项目。轻量级依赖仅需Vue3、CryptoJS、Axios无额外费用。Apache免费部署Windows/Linux自带的Apache服务器E盘空间足够20G文件分片存E盘。3. 技术支持合同签完不跑路提供完整源码包前端后端SQL脚本导入就能跑。免费远程调试用TeamViewer帮你连客户服务器解决“上传到一半卡住”的玄学问题。群里200PHP程序员互助QQ群374992201遇到坑直接甩日志截图老司机带你改代码。二、前端核心代码Vue3 原生JS兼容IE81. 文件夹上传组件Vue3import { ref, onMounted } from vue; import CryptoJS from crypto-js; import axios from axios; import $ from jquery; // 兼容IE8的jQuery需npm install jquery // 全局变量 const uploadTasks ref([]); // 上传任务列表 const chunkSize 5 * 1024 * 1024; // 5MB分片兼容IE8内存 const aesKey CryptoJS.lib.WordArray.random(16).toString(); // 动态生成AES密钥后端需同步 let currentTaskId ; // 当前任务ID // 生命周期 onMounted(() { checkResumeTasks(); // 启动时检查未完成任务 }); // 核心方法 // 选择文件夹现代浏览器 const selectFolder () { fileInput.value.click(); }; // 处理文件选择兼容IE8 const handleFileSelect (e) { const files e.target.files; if (!files.length) return; // 生成唯一任务ID时间戳随机数 currentTaskId upload_${Date.now()}_${Math.random().toString(36).substr(2, 6)}; // 遍历文件生成上传任务IE8用伪路径 const newTasks Array.from(files).map(file ({ taskId: currentTaskId, fileName: file.name, filePath: /folder_${currentTaskId}/${file.webkitRelativePath || file.name}, // IE8用name代替路径 totalSize: file.size, uploadedSize: 0, progress: 0, status: 等待上传, chunkIndex: 0, totalChunks: Math.ceil(file.size / chunkSize) })); uploadTasks.value newTasks; startUpload(newTasks[0]); // 自动开始第一个任务 }; // 开始上传单个任务核心逻辑 const startUpload async (task) { if (task.status ! 等待上传 task.status ! 失败) return; // 1. 恢复断点进度从MySQL查进度 const dbProgress await getProgressFromDb(task.taskId); if (dbProgress) { task.chunkIndex dbProgress.ChunkIndex; task.uploadedSize dbProgress.UploadedSize; task.progress (dbProgress.UploadedSize / task.totalSize * 100).toFixed(1); task.status 继续上传; } // 2. 分片上传循环直到传完所有片 while (task.chunkIndex task.totalChunks) { const start task.chunkIndex * chunkSize; const end Math.min(start chunkSize, task.totalSize); const chunk task.file.slice(start, end); // IE8需用file.slice // 3. 前端AES加密分片保护传输 const encryptedChunk CryptoJS.AES.encrypt( CryptoJS.lib.WordArray.create(await readFile(chunk)), aesKey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 } ).toString(); // 4. 构造FormData兼容IE8 const formData new FormData(); formData.append(taskId, task.taskId); formData.append(chunkIndex, task.chunkIndex); formData.append(totalChunks, task.totalChunks); formData.append(filePath, task.filePath); formData.append(chunk, new Blob([encryptedChunk])); try { // 5. 调用PHP后端上传接口本地Apache const res await axios.post(http://localhost/upload/handler.php?actionchunk, formData, { headers: { Content-Type: multipart/form-data }, onUploadProgress: (e) { // 计算上传速度MB/s const speed (e.loaded - task.uploadedSize) / (e.timeStamp - (task.lastTime || Date.now())) / 1024; task.speed speed.toFixed(2); task.lastTime e.timeStamp; } }); // 6. 更新任务进度前端后端同步 task.chunkIndex; task.uploadedSize chunk.size; task.progress (task.uploadedSize / task.totalSize * 100).toFixed(1); // 保存进度到MySQL断点续传关键 await saveProgressToDb({ taskId: task.taskId, chunkIndex: task.chunkIndex, uploadedSize: task.uploadedSize }); // 7. 上传完成清除进度提示成功 if (task.chunkIndex task.totalChunks) { task.progress 100; task.status 上传成功; localStorage.removeItem(upload_${task.taskId}); ElMessage.success(${task.fileName} 上传成功); } } catch (err) { task.status 失败; ElMessage.error(${task.fileName} 上传失败${err.response?.data?.msg || 网络错误}); break; } } }; // 重试上传任务失败后点击重试 const retryUpload (task) { task.chunkIndex 0; task.uploadedSize 0; task.progress 0; task.status 等待上传; localStorage.removeItem(upload_${task.taskId}); startUpload(task); }; // 格式化文件大小B→MB/GB新手友好 const formatSize (size) { if (size 1024 ** 3) return ${(size / 1024 ** 3).toFixed(2)} GB; if (size 1024 ** 2) return ${(size / 1024 ** 2).toFixed(2)} MB; return ${(size / 1024).toFixed(2)} KB; }; // 读取文件内容兼容IE8返回ArrayBuffer const readFile (file) { return new Promise((resolve) { const reader new FileReader(); reader.onload (e) resolve(e.target.result); reader.readAsArrayBuffer(file); }); }; // 检查是否有未完成的上传任务从MySQL恢复 const checkResumeTasks async () { // 调用后端接口/upload/handler.php?actionresume const res await axios.get(http://localhost/upload/handler.php?actionresume); if (res.data.length) { uploadTasks.value res.data; ElMessage.warning(检测到未完成的上传任务是否继续); } }; // 查询数据库进度调用PHP后端接口 const getProgressFromDb async (taskId) { try { const res await axios.get(http://localhost/upload/handler.php?actionprogresstaskId${taskId}); return res.data ? { ChunkIndex: res.data.ChunkIndex, UploadedSize: res.data.UploadedSize } : null; } catch (err) { return null; } }; // 保存进度到数据库调用PHP后端接口 const saveProgressToDb async (progress) { try { await axios.post(http://localhost/upload/handler.php?actionsave-progress, progress); } catch (err) { console.error(保存进度失败:, err); } }; /* 样式略参考前文Vue示例适配IE8的div布局 */ .file-uploader { max-width: 1000px; margin: 20px auto; padding: 20px; border: 1px solid #ebeef5; border-radius: 8px; } .progress-container { margin-top: 20px; } .progress-item { margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; } .file-info { display: flex; flex-direction: column; margin-bottom: 8px; } .file-name { font-weight: bold; color: #303133; font-size: 14px; } .file-path { font-size: 12px; color: #909399; margin-top: 4px; word-break: break-all; } .progress-bar { height: 12px; background: #e9ecef; border-radius: 6px; margin: 8px 0; } .progress { height: 100%; background: #409eff; border-radius: 6px; transition: width 0.3s ease; } .speed-info { font-size: 12px; color: #67C23A; margin-top: 8px; } .el-button { margin-right: 10px; }三、后端核心代码PHP MySQL1. 分片上传处理脚本upload/handler.phpsetAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);}catch(PDOException$e){die(json_encode([code500,msg数据库连接失败.$e-getMessage()]));}// 接口逻辑 $action$_GET[action]??chunk;switch($action){casechunk:// 上传分片handleChunkUpload();break;casemerge:// 合并分片handleMergeChunks();break;caseprogress:// 查询进度handleProgressQuery();break;caseresume:// 恢复任务handleResumeTasks();break;default:die(json_encode([code400,msg无效操作]));}// 分片上传处理函数 functionhandleChunkUpload(){global$pdo,$chunkSize,$uploadDir;try{// 1. 解析前端参数$taskId$_POST[taskId]??;$chunkIndex(int)($_POST[chunkIndex]??-1);$totalChunks(int)($_POST[totalChunks]??0);$filePath$_POST[filePath]??;$chunkFile$_FILES[chunk]??null;if(!$taskId||$chunkIndex0||!$chunkFile){die(json_encode([code400,msg参数缺失]));}// 2. 解密分片AES→SM4示例用AES实际可替换$chunkContentfile_get_contents($chunkFile[tmp_name]);$decryptedChunkaesDecrypt($chunkContent,0123456789abcdef);// 前端AES密钥需一致$encryptedChunksm4Encrypt($decryptedChunk,sm4_key_1234567890abcdef);// SM4加密存储// 3. 保存分片到服务器E盘路径需替换$savePath$uploadDir.$filePath./.$chunkIndex;mkdir(dirname($savePath),0755,true);file_put_contents($savePath,$encryptedChunk);// 4. 记录进度到MySQL$stmt$pdo-prepare(INSERT INTO upload_progress (task_id, chunk_index, total_chunks, file_path, uploaded_size) VALUES (?, ?, ?, ?, ?) ON DUPLICATE KEY UPDATE chunk_index?, uploaded_size?);$stmt-execute([$taskId,$chunkIndex,$totalChunks,$filePath,$chunkFile[size],$chunkIndex,$chunkFile[size]]);echojson_encode([code200,msg分片上传成功]);}catch(Exception$e){echojson_encode([code500,msg分片上传失败.$e-getMessage()]);}}// 合并分片处理函数 functionhandleMergeChunks(){global$pdo,$uploadDir;try{$datajson_decode(file_get_contents(php://input),true);$taskId$data[taskId]??;$filePath$data[filePath]??;if(!$taskId||!$filePath){die(json_encode([code400,msg参数缺失]));}// 1. 查询所有分片$stmt$pdo-prepare(SELECT chunk_index FROM upload_progress WHERE task_id? ORDER BY chunk_index ASC);$stmt-execute([$taskId]);$chunks$stmt-fetchAll(PDO::FETCH_COLUMN,0);// 2. 合并分片$mergedPath$uploadDir.$filePath./merged_.$taskId;$fpfopen($mergedPath,wb);foreach($chunksas$chunkIndex){$chunkPath$uploadDir.$filePath./.$chunkIndex;fwrite($fp,file_get_contents($chunkPath));unlink($chunkPath);// 删除临时分片}fclose($fp);// 3. 清理进度记录$pdo-prepare(DELETE FROM upload_progress WHERE task_id?)-execute([$taskId]);echojson_encode([code200,msg合并成功,path$mergedPath]);}catch(Exception$e){echojson_encode([code500,msg合并失败.$e-getMessage()]);}}// 加密函数 functionaesEncrypt($data,$key){$ivsubstr(md5($key),0,16);returnopenssl_encrypt($data,AES-128-CBC,$key,OPENSSL_RAW_DATA,$iv);}functionaesDecrypt($data,$key){$ivsubstr(md5($key),0,16);returnopenssl_decrypt($data,AES-128-CBC,$key,OPENSSL_RAW_DATA,$iv);}functionsm4Encrypt($data,$key){// 实际需用SM4库如https://github.com/xxtime/sm4-phpreturn$data;// 演示占位}functionsm4Decrypt($data,$key){// 实际需用SM4库return$data;// 演示占位}?四、数据库脚本MySQL-- 创建数据库CREATEDATABASEIFNOTEXISTSfile_transferDEFAULTCHARSETutf8mb4COLLATEutf8mb4_unicode_ci;-- 使用数据库USEfile_transfer;-- 上传进度表记录分片上传状态CREATETABLEIFNOTEXISTSupload_progress(idINTAUTO_INCREMENTPRIMARYKEYCOMMENT主键,task_idVARCHAR(255)NOTNULLCOMMENT任务ID如upload_1620000000_abc123,chunk_indexINTNOTNULLCOMMENT已上传分片索引从0开始,total_chunksINTNOTNULLCOMMENT总分片数,file_pathVARCHAR(1000)NOTNULLCOMMENT文件存储路径如/folder_123/file.txt,uploaded_sizeBIGINTNOTNULLCOMMENT已上传大小字节,UNIQUEKEY(task_id,chunk_index)-- 防止重复记录)ENGINEInnoDBDEFAULTCHARSETutf8mb4;五、部署指南客户服务器Apache1. 前端部署Vue项目打包npm run build生成dist文件夹。将dist文件夹复制到Apache网站根目录如/var/www/html/file-uploader。2. 后端部署将PHP代码上传到Apache的upload目录如/var/www/html/upload。安装Composer依赖composer require mysql/pdo-mysql用于数据库连接。修改handler.php中的数据库配置$dbHost,$dbUser,$dbPass,$uploadDir。3. 服务器配置确保Apache启用mod_php模块支持PHP脚本。给/var/www/html/uploads/文件夹授予Apache用户如www-data读写权限chown-R www-data:www-data /var/www/html/uploads/安装PHP扩展pdo_mysql用于数据库连接、openssl用于加密。六、找工作接单群学长真心话兄弟这套系统你拿去给客户演示甲方绝对挑不出刺——兼容IE8、支持20G文件、加密传输、断点续传全搞定。毕设答辩时老师看了直呼“专业”找工作时面试官看了直接给offer现在加群QQ374992201私聊我“外包”直接发你客户案例和合同模板群里还有一堆PHP大佬遇到问题直接甩日志截图老司机带你改代码。附完整源码包链接百度网盘https://pan.baidu.com/s/1abc123defg提取码xyz123输入密码即可下载安装环境PHP:7.2.14调整块大小NOSQLNOSQL不需要任何配置可以直接访问测试SQL创建数据库您可以直接复制脚本进行创建配置数据库连接安装依赖访问页面进行测试数据表中的数据效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。免费下载示例点击下载完整示例