当前位置：首页 > news >正文

探讨Vue-cli项目中大文件上传的解决方案

news 2026/5/12 3:51:15

【一个网工仔的悲喜交加：前端搞定了，后端求包养！】

各位道友好！俺是山西某高校网络工程专业的菜狗一枚，刚啃完《JavaScript从入门到住院》，就被导师按头要求搞个10G大文件上传系统。现在前端用Vue3+原生JS硬怼出了半成品，但后端还是个大坑啊！求各路神仙带带弟弟，或者收个关门弟子（管饭就行）！

💻 前端魔改代码（Vue3 + 原生JS兼容IE8版）

// FileUploader.js（兼容IE8的文件夹上传组件）classOldSchoolUploader{constructor(options){this.chunks=[];// 分片信息存储this.fileMd5='';// 文件唯一标识this.isIE8=!!window.ActiveXObject||"ActiveXObject"inwindow;// 检测IE8this.isXinChuang=/Lotus|RedLotus|QAX/.test(navigator.userAgent);// 检测国产浏览器// IE8专用XMLHttpRequest封装this.getIE8XHR=()=>{try{returnnewActiveXObject("Msxml2.XMLHTTP");}catch(e){returnnewActiveXObject("Microsoft.XMLHTTP");}};// 计算文件MD5（IE8用文件名+大小当伪MD5）this.calculateMD5=(file,callback)=>{if(this.isIE8){callback(`${file.name}-${file.size}-${Date.now()}`);}else{// 正常MD5计算（此处省略200行crypto-js代码）console.log("正常浏览器MD5计算中...");}};}// 文件夹上传（递归遍历+FormData魔改）uploadFolder(folder,parentPath=''){constfiles=[];constdirReader=folder.createReader();dirReader.readEntries(entries=>{entries.forEach(entry=>{if(entry.isFile){entry.file(file=>{files.push({path:`${parentPath}/${entry.name}`,file});});}else{this.uploadFolder(entry,`${parentPath}/${entry.name}`);}});// 国产浏览器降级处理if(this.isXinChuang){setTimeout(()=>this.processFiles(files),100);}else{Promise.all(files).then(()=>this.processFiles(files));}});}// 断点续传进度保存（兼容IE8的localStorage降级方案）saveProgress(fileMd5,progress){if(window.localStorage){localStorage.setItem(`upload_${fileMd5}`,JSON.stringify(progress));}elseif(document.documentElement.addBehavior){// IE8及以下用userData存储conststorage=document.createElement('div');storage.addBehavior('#default#userData');storage.setAttribute('progress',JSON.stringify(progress));storage.save(`upload_${fileMd5}`);}}}// Vue3组件中使用示例exportdefault{methods:{handleFolderUpload(event){constfolderInput=event.target;if(folderInput.files&&folderInput.files[0]){constfolder=folderInput.files[0].webkitRelativePath?folderInput.files[0]// Chrome:{// IE/Edge模拟文件夹name:'fake_folder',createReader:()=>({readEntries:callback=>{constentries=Array.from(folderInput.files).map(file=>({isFile:true,name:file.name,file:()=>newPromise(resolve=>resolve(file))}));callback(entries);}})};constuploader=newOldSchoolUploader();uploader.uploadFolder(folder);}}}}

🎯 血泪经验总结

浏览器兼容性：
- IE8用ActiveXObject替代fetch
- 国产浏览器（如龙芯）需禁用某些现代API
- 文件路径统一用/避免转义问题

断点续传秘籍：

// 本地存储进度（兼容IE8）constsaveProgress=(fileMd5,progress)=>{if(window.localStorage){localStorage.setItem(`upload_${fileMd5}`,JSON.stringify(progress));}else{// IE8降级方案document.cookie=`upload_${fileMd5}=${encodeURIComponent(JSON.stringify(progress))};path=/`;}};