核心内容摘要
那些年，我们一起追过的“笔盒”：不只是收纳，更是青春的时光机
毕业设计の终极挑战同学你这毕业设计要做文件管理系统还要支持10G大文件上传导师推了推眼镜我仿佛看到他头顶飘着这届学生真难带的弹幕。
是的老师还要兼容IE8我拍着胸脯保证内心OS现在跑路还来得及吗于是我这个网络工程专业的菜鸟开始了用Vue3原生JS手搓百度WebUploader的奇幻之旅。
毕竟谁让咱学校机房还跑着Windows7IE9呢微软这锅我不背
前端の魔改之路文件选择器兼容IE8版// 魔改后的文件选择器支持文件夹functioncreateFileInput(callback){constinputdocument.createElement(input);input.typefile;input.webkitdirectorytrue;// Chromeinput.directorytrue;// Firefoxinput.multipletrue;// IE8兼容方案手动选择文件if(isIE8()){input.onchangefunction(){constfiles[];for(leti0;ithis.files.length;i){files.push(this.files[i]);}callback(files);};}else{// 现代浏览器处理文件夹input.onchangefunction(){constfiles[];constwalkFiles(entry){if(entry.isFile){entry.file(filefiles.push(file));}elseif(entry.isDirectory){constreaderentry.createReader();reader.readEntries(entries{entries.forEach(walkFiles);});}};if(this.files){// 非IE的直接获取Array.from(this.files).forEach(filefiles.push(file));}else{// WebKit API处理constitemsthis.webkitEntries;items.forEach(walkFiles);}callback(files);};}input.click();}断点续传核心LocalStorage版// 进度存储管理器兼容所有浏览器classUploadProgressManager{constructor(){this.storageKeyfile_upload_progress;this.progressDatathis.loadProgress();}loadProgress(){try{constdatalocalStorage.getItem(this.storageKey);returndata?JSON.parse(data):{};}catch(e){console.error(LocalStorage error:,e);return{};}}saveProgress(fileId,chunkIndex,uploadedSize){if(!this.progressData[fileId]){this.progressData[fileId]{};}this.progressData[fileId][chunkIndex]uploadedSize;try{// 分片存储防止超过5MB限制constchunkSize1000;// 每个存储项最多1000个分片constkeysObject.keys(this.progressData[fileId]);for(leti0;ikeys.length;ichunkSize){constchunkkeys.slice(i,ichunkSize);constchunkData{};chunk.forEach(k{chunkData[k]this.progressData[fileId][k];});localStorage.setItem(${this.storageKey}_${fileId}_${Math.floor(i/chunkSize)},JSON.stringify(chunkData));}}catch(e){console.error(Progress save failed:,e);}}// 其他方法省略...实际代码有完整实现}
后端のPython救赎Flask分片接收接口fromflaskimportFlask,request,jsonifyimportosfromCrypto.CipherimportAESimportbase64 appFlask(__name__)UPLOAD_FOLDER/tmp/uploadsSECRET_KEYbThisIsASecretKey123# 生产环境请使用更安全的密钥# 文件分片处理app.route(/upload,methods[POST])defupload_chunk():file_idrequest.form[fileId]chunk_indexint(request.form[chunkIndex])total_chunksint(request.form[totalChunks])file_namerequest.form[fileName]# 解密文件内容前端加密后传输encrypted_datarequest.files[file].read()cipherAES.new(SECRET_KEY,AES.MODE_EAX)nonceencrypted_data[:16]ciphertextencrypted_data[16:-16]tagencrypted_data[-16:]decryptedcipher.decrypt_and_verify(ciphertext,tag)# 保存分片chunk_pathos.path.join(UPLOAD_FOLDER,f{file_id}.part{chunk_index})withopen(chunk_path,wb)asf:f.write(decrypted)# 如果是最后一个分片合并文件ifchunk_indextotal_chunks-1:merge_file(file_id,total_chunks,file_name)returnjsonify({status:success})defmerge_file(file_id,total_chunks,file_name):final_pathos.path.join(UPLOAD_FOLDER,file_name)withopen(final_path,wb)asoutfile:foriinrange(total_chunks):chunk_pathos.path.join(UPLOAD_FOLDER,f{file_id}.part{i})withopen(chunk_path,rb)asinfile:outfile.write(infile.read())os.remove(chunk_path)# 这里可以添加阿里云OSS上传代码# upload_to_oss(final_path, file_name)
兼容性の血泪史IE8的绝望发现FileReader不支持改用Flash方案没有Promise手动实现简易版XMLHttpRequest没有onload用onreadystatechange文件夹结构保留// 构建文件路径树functionbuildFileTree(files){consttree{};files.forEach(file{constpathPartsfile.webkitRelativePath?file.webkitRelativePath.split(/):[file.name];// IE fallbackletcurrenttree;pathParts.forEach((part,i){if(!current[part]){current[part]ipathParts.length-1?file:{__isDir:true};}currentcurrent[part];});});returntree;}
最终成果展示经过3个月的奋战和无数杯咖啡我的超级文件管理系统终于诞生了核心功能✅ 10G文件秒传分片上传✅ 浏览器关闭后进度不丢失LocalStorageIndexedDB双保险✅ 文件夹上传保留完整结构✅ AES-256加密传输存储✅ 兼容IE8到Chrome120全系列✅ 后端Python实现断点续传演示效果// 前端调用示例constuploadernewFileUploader({server:/upload,chunkSize:5*1024*1024,// 5MB分片encrypt:true,onProgress:(percent){console.log(上传进度:${percent}%);}});// 上传整个文件夹document.getElementById(uploadBtn).onclick(){createFileInput((files){constfileTreebuildFileTree(files);uploader.uploadTree(fileTree);});};
求职の逆袭现在这个项目已经成为我的求职神器面试官“请描述你遇到的最大技术挑战”我“老师您听说过IE8兼容大文件上传吗”求职福利加入我们的QQ群374992201不仅可以免费获取完整源代码获得7*24小时技术支持参与红包雨活动最高99元推荐工作机会师兄师姐都在群里PS群文件里有《IE8兼容性终极指南》和《大文件上传避坑手册》都是我用头发换来的经验啊最后弱弱地问有HR大佬在看吗招前端开发吗会写IE8兼容代码的那种…将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。
批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。
文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。
下载示例点击下载完整示例