Vue2如何设计大文件分块上传的交互界面与用户体验？-开发者社区

震惊！100元预算要求开发企业级大文件上传系统？

各位前端大佬们好呀！(双手合十)

我是一名挣扎在温饱线的浙江前端码农，最近接了个"史诗级"项目——20G大文件上传系统，预算高达100元！这让我感动得热泪盈眶，毕竟现在连煎饼果子都要10块一个了…

客户需求清单(比我的购物车还长)

20G文件上传：比我前女友分手时发的长文还大
文件夹保持层级：客户文件夹结构比我家族谱还复杂
IE9兼容：这浏览器比我奶奶的老花镜岁数还大
加密要求：SM4/AES，比我藏私房钱的方式还安全
断点续传：要求比我的减肥计划还持久
免费服务：3年维护+7×24支持，比中国移动客服还贴心

前端技术选型(泪流满面版)

// 选择器：在100元预算下，我只能选择最省钱的方式consttechStack={framework:'原生JS',// 因为vue要钱(误)UI:'纯CSS',// 没钱买组件库encryption:'console.log("已加密")',// 安全等级：肉眼加密IE9支持:'祈祷',// 主要靠玄学}

部分前端代码展示(真实可用版)

1. 文件夹选择与遍历 (使用webkitRelativePath保持结构)

// 获取文件夹并保持结构document.getElementById('folderPicker').addEventListener('change',function(e){constfiles=e.target.files;constfolderMap={};// 遍历文件并构建层级结构for(leti=0;i<files.length;i++){constfile=files[i];if(file.webkitRelativePath){constpathParts=file.webkitRelativePath.split('/');letcurrentLevel=folderMap;// 构建文件夹树for(letj=0;j<pathParts.length-1;j++){constpart=pathParts[j];if(!currentLevel[part]){currentLevel[part]={};}currentLevel=currentLevel[part];}// 添加文件到最底层currentLevel[pathParts[pathParts.length-1]]=file;}}console.log('文件夹结构:',folderMap);// 这里应该有上传逻辑，但预算不够写...});

2. 分片上传控制 (伪断点续传版)

classChunkUploader{constructor(file,options={}){this.file=file;this.chunkSize=options.chunkSize||5*1024*1024;// 5MBthis.chunks=Math.ceil(file.size/this.chunkSize);this.currentChunk=0;this.savedProgress=JSON.parse(localStorage.getItem(file.name))||0;}asyncupload(){// "断点续传" - 从上次中断的地方继续for(leti=this.savedProgress;i<this.chunks;i++){constchunk=this.getChunk(i);// 假装这里有加密constencryptedChunk=this.fakeEncrypt(chunk);// 理论上这里要发到服务器console.log(`上传分片${i+1}/${this.chunks}`);// 保存进度(比我的存款进度保存得还认真)localStorage.setItem(this.file.name,i);this.currentChunk=i;}// 上传完成清理记录localStorage.removeItem(this.file.name);}getChunk(index){conststart=index*this.chunkSize;constend=Math.min(start+this.chunkSize,this.file.size);returnthis.file.slice(start,end);}fakeEncrypt(data){// 预算有限，只能做做样子console.log('正在用SM4加密...(假装很安全)');returndata;}}

3. IE9兼容性处理 (痛苦面具版)

// 检查是否是IE9functionisIE9(){return/*@cc_on!@*/false||!!document.documentMode&&document.documentMode===9;}// IE9特别处理if(isIE9()){console.log('检测到IE9，开始执行特殊兼容代码...');document.write('温馨提示：您正在使用古董浏览器，建议升级！');// IE9不支持File API的替代方案document.getElementById('filePicker').innerHTML=''+' （IE9爷爷不支持文件夹上传，将就下吧）';}

加入我们福利社(这才是重点！)

加QQ群374992201立享：

🧧 1-99元红包（比项目预算高）
💼 项目合作接单
👑 超级会员50%提成
🤝 技术交流/工作内推

特别活动：推荐项目赚提成！2万项目你能拿1万！比996香多了！

免责声明(正经一秒)

以上代码仅供娱乐，真实项目请：

增加真实加密逻辑
完善错误处理
添加进度反馈
最重要的是——提高预算！

PS：本人目前也在求职，能接受加班(因为已经天天加班了)，薪资要求比这个项目预算高那么"一点点"就行…

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例

Vue2如何设计大文件分块上传的交互界面与用户体验？