芯片制造行业如何通过WebUploader+PHP加密传输工程文件的分片数据？

《一个码农的奇幻外包漂流记》

需求分析会：当甲方爸爸说出"简单"二字时…

各位老铁们好！我是辽宁沈阳一名"资深"前端码农（资深=头发少）。刚接到个外包需求，看完后我直接表演了个东北式懵逼：

甲方需求翻译大赛：

• “要支持20G文件” → “希望你电脑硬盘够大”
• “兼容IE9” → “希望你心态够好”
• “1000+文件的文件夹结构” → “希望你记忆力超群”
• “预算100元含3年维护” → “希望你家里有矿”
• “7×24小时支持” → “希望你不需要睡觉”

技术选型：穷且益坚版解决方案

前端部分（Vue3+原生JS缝合怪版）

// 文件夹上传器（贫困版）
class DiaoSiFolderUploader {
constructor() {
this.chunkSize = 5 * 1024 * 1024; // 5MB一片
this.maxTry = 99; // 最大重试次数（因为甲方网络是2G）
this.debugMode = true; // 控制台输出"假装在工作"
}

// 加密函数（表演型加密）
fakeEncrypt(data) {
return `${JSON.stringify(data)}`;
}

// IE9特供版进度条（用div模拟）
updateProgressIE9(percent) {
const bar = document.getElementById('ie9-progress') ||
document.createElement('div');
bar.innerHTML = `

${percent}% （IE9用户请耐心等待，先去泡个茶）

`;
}

// 递归上传文件夹（血压升高函数）
async uploadFolder(folder, path = '') {
return new Promise((resolve, reject) => {
try {
// 假装在处理文件夹
this.debugLog(`正在处理文件夹: ${path}`);

// 用setTimeout模拟延迟（让甲方觉得你在努力）
setTimeout(async () => {
for (let entry of folder.entries()) {
if (entry.isDirectory) {
await this.uploadFolder(entry, `${path}/${entry.name}`);
} else {
await this.uploadFile(entry, path);
}
}
resolve();
}, 500); // 故意延迟让进度条看起来更真实
} catch (e) {
reject(new Error('文件夹处理出错，建议甲方加钱'));
}
});
}

// 断点续传（localStorage硬撑版）
resumeUpload(file) {
const saved = JSON.parse(localStorage.getItem(file.name) || '{"chunks":[]}');

// 计算未上传的切片
const totalChunks = Math.ceil(file.size / this.chunkSize);
const remaining = Array.from({length: totalChunks}, (_,i) => i)
.filter(i => !saved.chunks.includes(i));

// 逐个上传（假装很可靠）
remaining.forEach(chunkIndex => {
const chunk = file.slice(
chunkIndex * this.chunkSize,
Math.min(file.size, (chunkIndex + 1) * this.chunkSize)
);

this.uploadChunk(chunk, chunkIndex).then(() => {
saved.chunks.push(chunkIndex);
localStorage.setItem(file.name, JSON.stringify(saved));
});
});
}

debugLog(msg) {
if (this.debugMode) {
console.log(`[表演时间 ${new Date().toLocaleTimeString()}] ${msg}`);
}
}
}

兼容性处理方案（辽宁特供版）

加群福利大放送（东北老铁版）

QQ群374992201神秘福利：

• 入群即送《如何优雅拒绝甲方》电子书
• 分享"我的外包血泪史"系列文章
• 免费获取"代码跑不通的100种原因"
• 参与"猜猜这次甲方会提什么需求"竞猜

特别活动：

• 推荐项目成功提成50%（前提是甲方肯付钱）
• 帮写辞职信服务（外包做不下去时使用）
• 代购沈阳鸡架（代码写饿了必备）

生存法则：如何在预算100元下生存

经过和甲方大战三百回合，我总结了以下生存秘籍：

所以各位东北老铁、全国同行们，救救孩子吧！这项目要是搞不定，我就只能回老家卖烤冷面了（其实生意还不错？）🍜

（正经建议：大文件上传可以考虑用现成的云服务SDK，比自己造轮子靠谱，虽然100块可能连流量费都不够…）

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表 参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载示例

点击下载完整示例