工程建筑实践：Vue3如何通过百度WebUploader优化施工日志文件夹的目录结构分片上传与版本控制？

一个大三仔的编程血泪史大文件上传系统开发实录前言各位老铁们好我是广西某不知名大学网络工程专业的大三学生最近被导师逼着做一个支持10G文件上传、断点续传、文件夹层级保留、全浏览器兼容、还要加密传输存储的变态文件管理系统。导师说做好了能推荐去大厂做不好就等着延毕吧哭唧唧。技术选型经过一番折腾我选定了以下豪华套餐前端Vue3 WebUploader百度开源组件后端Python虽然我还不会但听说能速成数据库MySQL学校机房老古董只认这个存储阿里云OSS白嫖的免费额度开发工具VSCode比Dev-C香多了前端实现原生JS版以下是经过我三天三夜不眠不休实际是抄了20篇博客写出的前端核心代码// 兼容IE8的XMLHttpRequest封装头发已掉光functioncreateXHR(){if(window.XMLHttpRequest){returnnewXMLHttpRequest();}elseif(window.ActiveXObject){try{returnnewActiveXObject(Msxml2.XMLHTTP);}catch(e){try{returnnewActiveXObject(Microsoft.XMLHTTP);}catch(e){alert(您的浏览器太古老了建议使用Chrome或Firefox);returnnull;}}}}// 文件分片上传类命名暴露了我是菜鸟functionFileUploader(){this.chunkSize5*1024*1024;// 5MB分片this.filenull;this.fileId;this.uploadedChunks[];this.init();}FileUploader.prototype{init:function(){// 本地存储进度兼容IE8的localStorage替代方案if(!window.localStorage){window.localStorage{getItem:function(key){returndocument.cookie.replace(newRegExp((?:^|.*;\\s*)encodeURIComponent(key).replace(/[\-\.\\*]/g,\\$)\\s*\\\\s*((?:[^;](?!;))*[^;]?).*),$1)||null;},setItem:function(key,value){document.cookieencodeURIComponent(key)encodeURIComponent(value); expiresTue, 19 Jan 2038 03:14:07 GMT; path/;}};}},// 计算文件MD5IE8哭晕在厕所calculateFileMD5:function(file,callback){if(window.FileReaderwindow.crypto){// 现代浏览器方案constreadernewFileReader();reader.onload(e){constarrayBuffere.target.result;crypto.subtle.digest(MD5,arrayBuffer).then(buffer{consthashArrayArray.from(newUint8Array(buffer));consthashHexhashArray.map(bb.toString(16).padStart(2,0)).join();callback(hashHex);});};reader.readAsArrayBuffer(file);}else{// IE8兼容方案实际不可用这里只是占位alert(您的浏览器不支持MD5计算上传可能不安全);callback(fake-md5-for-ie8);}},// 分片上传核心方法uploadFile:function(file){this.filefile;this.fileIdfile.name-file.size-file.lastModified;// 从本地存储加载已上传分片信息constsavedChunkslocalStorage.getItem(upload_this.fileId);this.uploadedChunkssavedChunks?JSON.parse(savedChunks):[];// 计算总分片数consttotalChunksMath.ceil(file.size/this.chunkSize);// 模拟上传过程实际需要替换为真实AJAX请求letuploaded0;for(leti0;itotalChunks;i){// 跳过已上传的分片if(this.uploadedChunks.includes(i)){uploaded;continue;}// 这里应该是真实的AJAX上传代码// 为了演示我们用setTimeout模拟setTimeout((chunkIndex){console.log(上传分片${chunkIndex}/${totalChunks});// 模拟上传成功if(Math.random()0.1){// 10%失败率测试断点续传this.uploadedChunks.push(chunkIndex);localStorage.setItem(upload_this.fileId,JSON.stringify(this.uploadedChunks));uploaded;if(uploadedtotalChunks){console.log(上传完成);// 这里应该调用合并文件的接口}}else{console.log(分片${chunkIndex}上传失败将重试...);}},i*1000,i);}},// 文件夹上传递归实现uploadFolder:function(folderEntry){if(!window.FileReader||!window.DirectoryReader){alert(您的浏览器不支持文件夹上传请使用Chrome/Firefox最新版);return;}constdirectoryReaderfolderEntry.createReader();directoryReader.readEntries((entries){for(letentryofentries){if(entry.isFile){entry.file(file{// 为文件夹中的文件添加路径前缀constrelativePathentry.fullPath.substring(1);// 去掉开头的/constfakeFilenewFile([file],file.name,{type:file.type,lastModified:file.lastModified});// 这里需要扩展File对象以保存路径信息实际实现更复杂console.log(准备上传文件:,relativePath,fakeFile);this.uploadFile(fakeFile);});}elseif(entry.isDirectory){this.uploadFolder(entry);}}});}};// Vue3组件示例极简版const{createApp,ref}Vue;createApp({setup(){constuploaderref(null);consthandleFileChange(e){constfilese.target.files;if(files.length0){if(!uploader.value){uploader.valuenewFileUploader();}uploader.value.uploadFile(files[0]);}};consthandleFolderChange(e){// 文件夹上传需要用户拖放或使用// 这里只是示例constfolderInpute.target;if(folderInput.filesfolderInput.files.length0){// 实际需要处理DirectoryEntry对象console.log(检测到文件夹输入但前端实现复杂...);}};return{handleFileChange,handleFolderChange};}}).mount(#app);开发趣事IE8兼容噩梦为了兼容IE8我不得不实现了一个cookie-based的localStorage替代方案结果发现IE8的cookie有4KB限制大文件上传直接崩溃。MD5计算IE8没有crypto API我尝试用Flash实现MD5结果发现学校机房禁用了Flash。文件夹上传发现WebUploader在IE和国产浏览器上对文件夹的支持各不相同最后不得不写了一堆浏览器嗅探代码。断点续传本地存储在隐私模式下不可用导致测试时经常丢失进度差点摔键盘。求助与招募现在项目卡在后端开发上求Python大神救救孩子需要实现文件分片接收接口需要实现分片合并接口需要实现加密存储功能需要兼容所有浏览器包括IE8重金求师加入QQ群374992201新人进群送1-99元红包推荐工作成功者提成20%项目金额招收超级会员提成直接50%比如2万项目直接提1万最终目标希望在毕业答辩时能演示一个支持10G文件上传断点续传重启电脑也不怕文件夹层级完美保留全浏览器兼容加密传输存储的完整文件管理系统让导师刮目相看顺利进入大厂PS如果实在做不出来可能要考虑转行送外卖…将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例点击下载完整示例