vue大文件上传的教程：从入门到进阶实战

（抱着键盘在宿舍转圈圈版）

各位大佬好呀！我是福州某大学·网络工程·大三·刚学会console.log()的·编程小白·秃头预备役。最近被导师按头要求搞个"能上传10G文件还带加密的文件夹传输系统"，现在每天的状态be like：

💻 前端：我会Vue3！
🖥️ 后端：Python是啥？能吃吗？
📂 数据库：MySQL…是那个会游泳的乌龟吗？

🎯 前端の绝地求生（Vue3+原生JS魔改版）

// 魔改WebUploader核心片段（兼容IE8的降级方案）classPoorManUploader{constructor(){this.chunks=[];// 存储分片信息this.browser=this.detectAncientBrowser();// 检测上古浏览器this.initFileInput();// 兼容IE8的文件选择}// 浏览器探测术（能识别IE6-11的玄学方法）detectAncientBrowser(){constua=navigator.userAgent.toLowerCase();if(ua.indexOf('msie')>-1)return'ie'+ua.match(/msie (\d+)/)[1];if(ua.indexOf('trident')>-1)return'ie11';return'modern';// 其他现代浏览器}// 文件夹上传核心逻辑（递归遍历FileList）handleFolderUpload(event){if(this.browser.startsWith('ie')){alert('IE用户请自觉切换Chrome！');return;}constfiles=event.target.files;constfileTree=this.buildFileTree(files);// 构建树形结构this.encryptTree(fileTree).then(encryptedTree=>{this.sliceAndUpload(encryptedTree);// 切片上传});}// 构建文件树（递归算法）buildFileTree(files,parentPath=''){consttree={};for(leti=0;i<files.length;i++){constfile=files[i];constpath=file.webkitRelativePath||file.name;// 兼容不同浏览器if(path.includes('/')){constdirs=path.split('/');constfileName=dirs.pop();letcurrentDir=tree;// 递归创建目录结构dirs.forEach(dir=>{if(!currentDir[dir])currentDir[dir]={};currentDir=currentDir[dir];});currentDir[fileName]=file;// 存储文件对象}else{tree[file.name]=file;// 根目录文件}}returntree;}// 魔改版分片上传（带断点续传）sliceAndUpload(fileNode,parentPath=''){constchunkSize=5*1024*1024;// 5MB分片constfile=fileNodeinstanceofFile?fileNode:fileNode.file;consttotalChunks=Math.ceil(file.size/chunkSize);// 从localStorage恢复进度（IE8兼容版）constsavedProgress=localStorage.getItem(`progress_${file.name}`);letstartChunk=savedProgress?parseInt(savedProgress):0;for(leti=startChunk;i<totalChunks;i++){constblob=file.slice(i*chunkSize,(i+1)*chunkSize);constformData=newFormData();formData.append('file',blob);formData.append('chunkIndex',i);formData.append('totalChunks',totalChunks);formData.append('fileId',this.generateFileId(file));formData.append('parentPath',parentPath);// 保留层级结构// 使用XMLHttpRequest兼容IEconstxhr=newXMLHttpRequest();xhr.open('POST','/api/upload',true);xhr.onload=()=>{if(xhr.status===200){localStorage.setItem(`progress_${file.name}`,i+1);if(i===totalChunks-1){console.log(`${file.name}上传完成！`);// this.mergeChunks(fileNode); // 合并分片（后端实现）}}};xhr.send(formData);}}}// 在Vue组件中使用exportdefault{mounted(){this.uploader=newPoorManUploader();},methods:{triggerUpload(){document.getElementById('fileInput').click();}}}

💡 生存指南（血泪经验）

1. IE兼容性：

   • 文件选择用``的降级方案
   • 引入es5-shim和json2.js垫片
   • 放弃CSS3动画改用jQuery淡入淡出

2. 断点续传：

   • 用localStorage存储进度（IE8可用）
   • 服务器端需要记录已上传的分片（但我还不会写后端）
   • 合并前校验所有分片完整性（后端实现）

3. 加密传输：

   • 前端用CryptoJS加密（但加密后文件变大怎么办？）
   • 后端解密后重新加密存储（求大神教我Python）
   • 传输使用HTTPS（本地开发用自签名证书）

4. 面试吹牛技巧：

   • “这个系统支持PB级文件传输”（实际最多10G）
   • “采用区块链技术加密”（其实就是Base64）
   • “通过量子计算优化分片算法”（其实随机切的）

📢 紧急求助

现在系统存在以下致命问题：

1. IE8上传超过2GB文件会崩溃（求优化方案）
2. 文件夹层级超过3层会丢失结构（递归算法写崩了）
3. 加密后的文件在Python后端无法解密（求后端代码）
4. 合并分片时偶尔会丢数据（数据库设计不会）

求各位大佬加群374992201拯救！现在入群可享：

• 免费获得价值998元的《如何在毕业设计里混过去》电子书
• 参与"帮学弟改BUG"活动赢取奶茶基金
• 推荐工作成功送《职场舔狗指南》纸质版

（突然正经）PS：真的求后端师傅！本人擅长：

• 熬夜改前端BUG
• 写注释骗评审
• PPT画大饼
• 帮师傅买奶茶

联系方式：QQ群374992201（暗号：我要毕业）
群内活动：

1. 新人入群送1-99元红包
2. 推荐新人得20%提成
3. 超级会员享50%分成（未来项目）

求师哥师姐推荐工作！本人要求不高：

• 工资够买奶茶
• 同事会讲段子
• 领导不画大饼
• 能带饭的优先

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

下载示例

点击下载完整示例