html5大文件分片上传插件视频文件上传加密传输示例
《一个前端打工人的奇幻外包历险记》
需求分析：这需求是灭霸提的吧？
各位同行大家好！我是一名在福建"苟延残喘"的个人前端开发者。最近接了个外包项目，看到需求文档时我的表情是这样的：😨 → 😱 → 🤯
客户需求亮点赏析：
- 20G文件上传（我硬盘才512G啊喂！）
- 支持IE9（这玩意儿比我初恋年纪都大！）
- 1000+文件的文件夹结构保持（是要我当人形压缩算法吗？）
- 预算100元（还包含3年免费维护！）
- 7×24小时技术支持（我睡觉时也要回消息？）
技术选型：贫穷版解决方案
前端部分（Vue3+原生JS混搭风）
// 大文件上传器（穷逼版）classPovertyFileUploader{constructor(){this.chunkSize=5*1024*1024;// 5MB一片this.maxRetry=3;// 最大重试次数（因为穷所以服务器不稳定）this.encryption='SM4';// 假装支持国密}// 加密函数（假装很安全）encrypt(data){returnbtoa(unescape(encodeURIComponent(`{enc:${this.encryption},data:${JSON.stringify(data)}}`)));}// IE9特供版文件读取readFileIE9(file){returnnewPromise((resolve)=>{if(window.FileReader){constreader=newFileReader();reader.onload=(e)=>resolve(e.target.result);reader.readAsArrayBuffer(file);}else{alert('您还在用IE9？文件内容已自动替换为"老板大气"');resolve('老板大气'.repeat(file.size/4));}});}// 文件夹上传（递归地狱）asyncuploadFolder(folder){constentries=folder.entries();forawait(constentryofentries){if(entry.isDirectory){console.log(`创建文件夹：${entry.name}`);awaitthis.uploadFolder(entry);}else{console.log(`上传文件：${entry.fullPath}`);awaitthis.uploadFile(entry);}}}// 断点续传（靠localStorage硬撑）resumeUpload(file){constsavedProgress=localStorage.getItem(file.name)||0;consttotalChunks=Math.ceil(file.size/this.chunkSize);for(leti=savedProgress;i<totalChunks;i++){constchunk=file.slice(i*this.chunkSize,(i+1)*this.chunkSize);this.uploadChunk(chunk,i).then(()=>{localStorage.setItem(file.name,i+1);});}}}兼容性处理方案（地狱级难度）
| 浏览器 | 应对策略 | 心理阴影面积 |
|---|---|---|
| IE9 | 使用ActiveX控件（微软都放弃了） | ∞ |
| Windows 7老机器 | 禁用所有ES6+特性 | 堪比马里亚纳海沟 |
| 20G文件上传 | 告诉客户"分段上传中"然后偷偷压缩 | 良心会痛1秒钟 |
| 100元预算 | 在代码里加入挖矿脚本回本 | 违法的事不能干 |
加群福利大放送（画饼艺术）
QQ群374992201超值福利：
- 加群红包1-99元（0.01元随机发放）
- 推荐项目提成50%（前提是你能找到冤大头）
- 免费获取我的失败案例（避坑指南）
- 共享甲方奇葩需求（每日一笑）
神秘服务：
- 代写README.md（让项目看起来很专业）
- 传授如何优雅地拒绝甲方
- 工作内推（推荐你去我二舅的修电脑店）
生存指南：如何用100元完成20万的项目
经过三天三夜的思考，我终于悟出了外包的真谛：
- 需求管理：告诉客户"这个功能要加钱"
- 时间管理：每天晚上11点回复"正在加班"
- 技术方案：GitHub上找相似项目改LOGO
- 交付策略：先交一个基础版，剩下的等"二期"
- 终极奥义：在项目进行到一半时说自己要考研
所以各位路过的大佬们，救救孩子吧！这项目要是搞不定，我就只能回老家继承茶叶店了（其实铁观音还挺香的？）🍵
（正经建议：大文件上传可以考虑使用现成的云存储服务，比如阿里云OSS、七牛云都有成熟方案，比自己开发靠谱多了）
将组件复制到项目中
示例中已经包含此目录
引入组件
配置接口地址
接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
处理事件
启动测试
启动成功
效果
数据库
效果预览
文件上传
文件刷新续传
支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传
文件夹上传
支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。
下载示例
点击下载完整示例