重庆老码农的「百元预算大文件传输」解决方案
一、项目开场白
各位同行好！老张我今年45岁，头发都快掉光了还在写代码。最近接了个「20G文件夹上传」的活儿，客户要求用原生JS+PHP实现，预算100块还要7*24小时支持…（掏出速效救心丸）不过咱是讲武德的人，既然接了活儿就得办漂亮！
二、技术选型（穷人版）
| 组件 | 替代方案 | 成本 |
|---|---|---|
| WebUploader | 自己造轮子（原生JS+Flash回退） | 0元 |
| SM4加密 | 调用WebCrypto API（AES兼容模式） | 0元 |
| 断点续传 | localStorage+MySQL+OSS分片存储 | 0元 |
| 文件夹上传 | `` | 0元 |
三、前端核心代码（Vue3兼容版）
export default { data() { return { isIE8: /*@cc_on!@*/false || !!document.documentMode, progress: 0, apiUrl: '/api/upload.php', chunkSize: 5 * 1024 * 1024, // 5MB分片 fileId: '' } }, methods: { triggerFileInput() { if (this.isIE8) { // IE8特殊处理：弹窗提示用Flash alert('请使用上方Flash按钮上传文件夹'); } else { document.getElementById('fileInput').click(); } }, async handleFileSelect(e) { const files = e.target.files; if (!files.length) return; // 生成唯一文件ID（保留路径结构） this.fileId = this.generateFileId(files[0]); // 初始化进度记录 localStorage.setItem(`progress_${this.fileId}`, '0'); // 并行上传所有文件（演示简化版） for (let i = 0; i < files.length; i++) { await this.uploadFile(files[i]); } }, generateFileId(file) { // 兼容IE8的路径处理 const path = file.webkitRelativePath || (file.fullPath ? file.fullPath.split('\\').join('/') : ''); return `${path}-${file.size}-${file.lastModified}`; }, async uploadFile(file) { const totalChunks = Math.ceil(file.size / this.chunkSize); let uploadedChunks = parseInt(localStorage.getItem(`progress_${this.fileId}`) || '0'); for (let i = uploadedChunks; i < totalChunks; i++) { const start = i * this.chunkSize; const end = Math.min(file.size, start + this.chunkSize); const blob = file.slice(start, end); // 加密数据（AES兼容模式） const encrypted = await this.encryptData(blob, 'AES'); // 上传分片 const formData = new FormData(); formData.append('file', encrypted, `chunk_${i}`); formData.append('fileId', this.fileId); formData.append('chunkIndex', i); formData.append('totalChunks', totalChunks); try { await fetch(this.apiUrl, { method: 'POST', body: formData }); // 更新进度 uploadedChunks = i + 1; localStorage.setItem(`progress_${this.fileId}`, uploadedChunks); this.progress = Math.round((uploadedChunks / totalChunks) * 100); } catch (err) { console.error('上传失败:', err); // 失败后自动重试3次 i--; if (i < 0) break; } } // 上传完成后清理记录 if (uploadedChunks === totalChunks) { localStorage.removeItem(`progress_${this.fileId}`); alert('上传完成！'); } }, // 简易加密（实际项目请用WebCrypto） encryptData(data, algorithm) { return new Promise(resolve => { // 这里只是演示，实际要用SM4/AES加密库 const reader = new FileReader(); reader.onload = (e) => { // 假装加密了... resolve(new Blob([e.target.result])); }; reader.readAsArrayBuffer(data); }); } } }四、PHP后端代码（穷人版）
'your-access-key','accessKeySecret'=>'your-secret-key','endpoint'=>'oss-cn-hangzhou.aliyuncs.com','bucket'=>'your-bucket'];// 接收参数$fileId=$_POST['fileId']??'';$chunkIndex=$_POST['chunkIndex']??0;$totalChunks=$_POST['totalChunks']??1;// 保存分片到临时目录$tempDir="/tmp/uploads/{$fileId}";if(!is_dir($tempDir)){mkdir($tempDir,0777,true);}$tempPath="{$tempDir}/chunk_{$chunkIndex}";move_uploaded_file($_FILES['file']['tmp_name'],$tempPath);// 记录上传进度（实际项目请用Redis）$db=newmysqli('localhost','root','password','file_db');$stmt=$db->prepare("INSERT INTO upload_progress (file_id, chunk_index, total_chunks, uploaded_at) VALUES (?, ?, ?, NOW()) ON DUPLICATE KEY UPDATE updated_at = NOW()");$stmt->bind_param("sii",$fileId,$chunkIndex,$totalChunks);$stmt->execute();// 检查是否所有分片都已上传$result=$db->query("SELECT COUNT(*) as count FROM upload_progress WHERE file_id = '{$fileId}' AND chunk_index <{$totalChunks}");$row=$result->fetch_assoc();if($row['count']==$totalChunks){// 合并分片并上传到OSS（简化版）$finalPath="/tmp/{$fileId}.dat";$cmd="cat{$tempDir}/chunk_* >{$finalPath}";exec($cmd);// 上传到OSS（实际项目请用阿里云SDK）$ossPath="uploads/{$fileId}.dat";$cmd="ossutil64 cp{$finalPath}oss://{$ossConfig['bucket']}/{$ossPath}";exec($cmd);// 清理临时文件array_map('unlink',glob("{$tempDir}/*"));rmdir($tempDir);unlink($finalPath);echojson_encode(['success'=>true,'message'=>'文件合并完成']);}else{echojson_encode(['success'=>true,'message'=>'分片保存成功']);}// 数据库表结构/* CREATE TABLE upload_progress ( id INT AUTO_INCREMENT PRIMARY KEY, file_id VARCHAR(255) NOT NULL, chunk_index INT NOT NULL, total_chunks INT NOT NULL, uploaded_at DATETIME NOT NULL, updated_at DATETIME NOT NULL, UNIQUE KEY (file_id, chunk_index) ); */?>五、IE8兼容方案（魔法版）
Flash回退方案：
- 使用
SWFUpload组件处理文件夹上传 - 通过
ExternalInterface与JS通信 - 示例代码太长，群里见…
- 使用
ActiveX控件（终极方案）：
function uploadFolder() { try { const folderPath = prompt("请输入文件夹路径（如C:\\data）:"); if (folderPath) { uploaderCtrl.UploadFolder(folderPath, "http://your-server/api/ie8_upload.php"); } } catch (e) { alert("请安装我们的专用上传控件！"); } }六、部署指南（白嫖版）
服务器配置：
- 安装PHP + MySQL + Nginx
- 配置
ossutil工具（阿里云官方命令行工具） - 设置
/tmp/uploads目录权限为777
数据库初始化：
CREATEDATABASEfile_db;USEfile_db;-- 上传进度表（见PHP代码部分）- 定时清理任务：
# 每天凌晨清理未完成的上传00* * *rm-rf /tmp/uploads/*七、项目总结
预算控制：
- 代码全部自己写（0元）
- 服务器用阿里云学生机（10元/月）
- 域名用免费TK域名（0元）
技术支持：
- 加入QQ群：374992201
- 喊一声"老张救命！"优先响应
后续优化方向：
- 替换Flash为WebAssembly方案
- 增加P2P加速上传
- 实现真正的SM4加密（需要C扩展）
最后声明：本方案仅供学习交流，实际项目请考虑购买商业授权（主要是怕律师函）。群里经常发红包，进来薅羊毛也值了！🚀
安装环境
PHP:7.2.14
调整块大小
NOSQL
NOSQL不需要任何配置，可以直接访问测试
SQL
创建数据库
您可以直接复制脚本进行创建
配置数据库连接
安装依赖
访问页面进行测试
数据表中的数据
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
免费下载示例
点击下载完整示例
