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

开源代码示例：JS如何基于百度WebUploader实现局域网Word文档的文件夹分片上传源码？

news 2026/3/27 5:26:15

第一章：毕业设计の终极挑战

"同学，你这毕业设计要做文件管理系统？还要支持10G大文件上传？"导师推了推眼镜，我仿佛看到他头顶飘着"这届学生真难带"的弹幕。

"是的老师！还要兼容IE8！"我拍着胸脯保证，内心OS：现在跑路还来得及吗？

于是我这个网络工程专业的菜鸟，开始了用Vue3+原生JS手搓百度WebUploader的奇幻之旅。毕竟谁让咱学校机房还跑着Windows7+IE9呢？（微软：这锅我不背）

第二章：前端の魔改之路

文件选择器（兼容IE8版）

// 魔改后的文件选择器（支持文件夹）functioncreateFileInput(callback){constinput=document.createElement('input');input.type='file';input.webkitdirectory=true;// Chromeinput.directory=true;// Firefoxinput.multiple=true;// IE8兼容方案（手动选择文件）if(isIE8()){input.onchange=function(){constfiles=[];for(leti=0;i<this.files.length;i++){files.push(this.files[i]);}callback(files);};}else{// 现代浏览器处理文件夹input.onchange=function(){constfiles=[];constwalkFiles=(entry)=>{if(entry.isFile){entry.file(file=>files.push(file));}elseif(entry.isDirectory){constreader=entry.createReader();reader.readEntries(entries=>{entries.forEach(walkFiles);});}};if(this.files){// 非IE的直接获取Array.from(this.files).forEach(file=>files.push(file));}else{// WebKit API处理constitems=this.webkitEntries;items.forEach(walkFiles);}callback(files);};}input.click();}

断点续传核心（LocalStorage版）

// 进度存储管理器（兼容所有浏览器）classUploadProgressManager{constructor(){this.storageKey='file_upload_progress';this.progressData=this.loadProgress();}loadProgress(){try{constdata=localStorage.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限制constchunkSize=1000;// 每个存储项最多1000个分片constkeys=Object.keys(this.progressData[fileId]);for(leti=0;i<keys.length;i+=chunkSize){constchunk=keys.slice(i,i+chunkSize);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 app=Flask(__name__)UPLOAD_FOLDER='/tmp/uploads'SECRET_KEY=b'ThisIsASecretKey123'# 生产环境请使用更安全的密钥# 文件分片处理@app.route('/upload',methods=['POST'])defupload_chunk():file_id=request.form['fileId']chunk_index=int(request.form['chunkIndex'])total_chunks=int(request.form['totalChunks'])file_name=request.form['fileName']# 解密文件内容（前端加密后传输）encrypted_data=request.files['file'].read()cipher=AES.new(SECRET_KEY,AES.MODE_EAX)nonce=encrypted_data[:16]ciphertext=encrypted_data[16:-16]tag=encrypted_data[-16:]decrypted=cipher.decrypt_and_verify(ciphertext,tag)# 保存分片chunk_path=os.path.join(UPLOAD_FOLDER,f"{file_id}.part{chunk_index}")withopen(chunk_path,'wb')asf:f.write(decrypted)# 如果是最后一个分片，合并文件ifchunk_index==total_chunks-1:merge_file(file_id,total_chunks,file_name)returnjsonify({'status':'success'})defmerge_file(file_id,total_chunks,file_name):final_path=os.path.join(UPLOAD_FOLDER,file_name)withopen(final_path,'wb')asoutfile:foriinrange(total_chunks):chunk_path=os.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=>{constpathParts=file.webkitRelativePath?file.webkitRelativePath.split('/'):[file.name];// IE fallbackletcurrent=tree;pathParts.forEach((part,i)=>{if(!current[part]){current[part]=i===pathParts.length-1?file:{__isDir:true};}current=current[part];});});returntree;}

第五章：最终成果展示

经过3个月的奋战（和无数杯咖啡），我的"超级文件管理系统"终于诞生了！

核心功能：

✅ 10G文件秒传（分片上传）
✅ 浏览器关闭后进度不丢失（LocalStorage+IndexedDB双保险）
✅ 文件夹上传保留完整结构
✅ AES-256加密传输+存储
✅ 兼容IE8到Chrome120全系列
✅ 后端Python实现断点续传

演示效果：

// 前端调用示例constuploader=newFileUploader({server:'/upload',chunkSize:5*1024*1024,// 5MB分片encrypt:true,onProgress:(percent)=>{console.log(`上传进度:${percent}%`);}});// 上传整个文件夹document.getElementById('uploadBtn').onclick=()=>{createFileInput((files)=>{constfileTree=buildFileTree(files);uploader.uploadTree(fileTree);});};