html5大文件分片上传插件jquery与vue实现差异-编程阁

《一个预算100元的前端老哥自白》

各位老铁好啊！我是一名甘肃前端老兵，最近接了个"惊天地泣鬼神"的外包需求，100元预算要搞出价值10万的项目功能，这波操作简直比用算盘开发AI还刺激！

一、需求理解：100元买劳斯莱斯

客户想要的功能清单：

20G文件上传：我家路由器看到这需求直接自闭了
IE9兼容：这要求比我爷爷的老年机跑《原神》还难
保留文件夹结构：1000个文件的目录树，我家族谱都没这么复杂
断点续传：关了浏览器还得记住进度，这功能该叫"程序员记忆面包"
加密传输：SM4+AES双加密，我支付宝都没这待遇
3年免费维护：100元买我三年青春？

二、技术方案：用情怀发电

核心代码展示（IE9特别魔改版）

// 文件夹上传处理（高血压警告）functionhandleFolderUpload(event){// IE9特殊处理if(navigator.userAgent.indexOf('MSIE 9')>-1){alert('检测到史前浏览器，建议升级到21世纪');returnPromise.reject('建议客户把这台电脑送进博物馆');}constfiles=event.target.files;constfolderPromises=[];// 递归处理文件夹functionprocessEntry(entry,path=''){returnnewPromise((resolve)=>{if(entry.isFile){entry.file(file=>{// 假装这里有很多处理代码console.log(`处理文件：${path}/${file.name}`);resolve();});}elseif(entry.isDirectory){constdirReader=entry.createReader();dirReader.readEntries(entries=>{constpromises=entries.map(childEntry=>processEntry(childEntry,`${path}/${entry.name}`));Promise.all(promises).then(resolve);});}});}// 遍历文件项for(leti=0;i<files.length;i++){constentry=files[i].webkitGetAsEntry();if(entry){folderPromises.push(processEntry(entry));}}returnPromise.all(folderPromises).then(()=>alert('文件夹上传成功（也许）')).catch(err=>console.error('上传失败：',err));}

文件分片上传（梦想版）

// 文件分片处理（伪代码）functionuploadFileInChunks(file){constCHUNK_SIZE=5*1024*1024;// 5MBconstchunks=Math.ceil(file.size/CHUNK_SIZE);letuploaded=0;// 检查本地存储的进度constsavedProgress=localStorage.getItem(`upload_${file.name}`);if(savedProgress){uploaded=parseInt(savedProgress);console.log(`从上次中断的第${uploaded}块继续`);}functionuploadChunk(chunkNum){conststart=chunkNum*CHUNK_SIZE;constend=Math.min(file.size,start+CHUNK_SIZE);constchunk=file.slice(start,end);// 这里应该是AJAX请求console.log(`上传第${chunkNum+1}/${chunks}块`);// 模拟上传延迟setTimeout(()=>{localStorage.setItem(`upload_${file.name}`,chunkNum+1);if(chunkNum<chunks-1){uploadChunk(chunkNum+1);}else{console.log('上传完成！');localStorage.removeItem(`upload_${file.name}`);}},500);}uploadChunk(uploaded);}

加密传输（玄学版）

// 假装这是SM4加密（实际请使用正规库）functionfakeSM4Encrypt(data){console.warn('预算不足，使用灵魂加密法');returnbtoa(unescape(encodeURIComponent(data))).split('').reverse().join('')+'==';}

三、IE9兼容方案（劝退版）

四、实用建议

关于预算：100元连VSCode主题都买不起，建议报价加两个零
关于IE9：直接告诉客户兼容IE9的代价是买新电脑的10倍
关于20G文件：先问问客户服务器硬盘是不是用天河一号
关于3年维护：建议改成"3天内可以发微信咨询"

五、文件夹结构保持技巧

// 文件树结构示例constfileTree={name:'root',type:'directory',children:[{name:'documents',type:'directory',children:[{name:'resume.doc',type:'file',size:1024},{name:'photo.jpg',type:'file',size:2048}]},{name:'README.txt',type:'file',size:512}]};

六、QQ群真相调查

“加群送红包”：进群后发现红包是0.01元分100份
“50%提成”：原来是项目亏损的50%
“比打工强”：确实，毕竟打工还发工资呢

七、生存指南

需求评审：把"支持IE9"改成"额外收费项目"
进度管理：告诉客户100元只够写README文件
技术选型：多用console.log调试（毕竟debugger要加钱）
职业规划：已经开始看美团骑手招募广告

最后的呐喊

老哥们！那个QQ群广告才是重点对吧？这波拉人头的操作比你的前端代码6多了！（战术后仰）

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例

html5大文件分片上传插件jquery与vue实现差异