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

web页面上如何使用js实现大附件的切片上传？

news 2026/3/27 2:36:33

一个前端菜鸟的大文件上传奋斗史

大家好，我是一个在浙江某大学网络工程专业摸爬滚打的大三狗🐶，最近被一个"小小的"文件管理系统项目折磨得死去活来…

我的"简单"需求清单 📝

文件上传：不就是传个文件吗？简单！等等…10G的文件？？
文件夹上传：要保留层级结构的那种哦～
断点续传：关了浏览器、重启电脑都不能丢进度！
加密传输：不能让隔壁寝室的小王偷看我的学习资料🔒
浏览器兼容：从IE8到各种国产浏览器，一个都不能少！

我的技术栈 🤹

前端：Vue3 + 原生JS（老师说要锻炼基础）
开发工具：VSCode（配色必须用暗黑主题才显得专业）
后端：Python（刚学，目前只会print(“Hello World”)）
数据库：MySQL（只会简单的增删改查）
服务器：先放我F盘，等有钱了再搞个CentOS虚拟机

我的血泪史 😭

在网上找了一圈代码，不是功能不全就是根本跑不起来！那些开发者连个联系方式都不留，出了bug只能自求多福。我寻思着，这代码写得跟薛定谔的猫似的——你不运行就不知道它能不能用！

于是我一怒之下建了个QQ群（374992201），欢迎同是天涯沦落人的小伙伴们加入。新人入群送1-99元红包（99元的那个红包我还没见过长啥样），还有各种"超级会员"、"代理商"头衔等你来拿！（其实就是大家一起互相折磨罢了）

前端代码实现（Vue3版） 🚀

1. 大文件分片上传核心逻辑

// FileUploader.vueexportdefault{data(){return{fileList:[],folderList:[],chunkSize:5*1024*1024,// 5MB一个分片maxRetries:3,// 最大重试次数uploadProgress:{},// 上传进度resumeData:JSON.parse(localStorage.getItem('uploadResumeData'))||{}// 断点续传数据}},methods:{// 处理文件选择handleFileChange(e){constfiles=Array.from(e.target.files)files.forEach(file=>{// 10GB文件限制检查if(file.size>10*1024*1024*1024){alert('文件大小超过10GB限制!')return}this.fileList.push(this.prepareFile(file))})},// 准备文件对象prepareFile(file){return{id:this.generateFileId(file),file,name:file.name,size:file.size,type:file.type,chunks:Math.ceil(file.size/this.chunkSize),uploadedChunks:0,status:'pending',encrypted:false}},// 生成唯一文件IDgenerateFileId(file){returnfile.name+'_'+file.size+'_'+file.lastModified},// 开始上传asyncstartUpload(){for(constfileObjofthis.fileList){if(fileObj.status==='completed')continuefileObj.status='uploading'awaitthis.uploadFile(fileObj)}},// 文件分片上传asyncuploadFile(fileObj){const{file,id,chunks}=fileObjfor(leti=0;i<chunks;i++){// 检查是否已经上传过该分片if(this.resumeData[id]?.includes(i)){fileObj.uploadedChunks++this.updateProgress(fileObj)continue}constchunk=this.getFileChunk(file,i)constformData=newFormData()formData.append('file',chunk)formData.append('chunkIndex',i)formData.append('totalChunks',chunks)formData.append('fileId',id)formData.append('fileName',file.name)letretries=0letsuccess=false// 重试机制while(retries<this.maxRetries&&!success){try{awaitthis.uploadChunk(formData)success=true// 更新断点续传数据if(!this.resumeData[id]){this.resumeData[id]=[]}this.resumeData[id].push(i)localStorage.setItem('uploadResumeData',JSON.stringify(this.resumeData))fileObj.uploadedChunks++this.updateProgress(fileObj)}catch(error){retries++if(retries===this.maxRetries){fileObj.status='error'console.error(`分片${i}上传失败:`,error)}}}}if(fileObj.uploadedChunks===chunks){fileObj.status='completed'// 通知后端合并文件awaitthis.mergeFile(fileObj)}},// 获取文件分片getFileChunk(file,chunkIndex){conststart=chunkIndex*this.chunkSizeconstend=Math.min(file.size,start+this.chunkSize)returnfile.slice(start,end)},// 更新进度updateProgress(fileObj){constprogress=Math.round((fileObj.uploadedChunks/fileObj.chunks)*100)this.uploadProgress[fileObj.id]=progressthis.$forceUpdate()},// 上传分片（实际请求需要根据后端实现）uploadChunk(formData){returnnewPromise((resolve,reject)=>{constxhr=newXMLHttpRequest()xhr.open('POST','/api/upload/chunk',true)xhr.onload=()=>{if(xhr.status>=200&&xhr.status<300){resolve(xhr.response)}else{reject(xhr.statusText)}}xhr.onerror=()=>reject('Network error')xhr.send(formData)})},// 合并文件（实际请求需要根据后端实现）mergeFile(fileObj){returnfetch('/api/upload/merge',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({fileId:fileObj.id,fileName:fileObj.name,totalChunks:fileObj.chunks})})},// 文件夹上传处理handleFolderUpload(e){constitems=e.dataTransfer?.items||e.target.filesthis.processFolderItems(items)},// 递归处理文件夹内容asyncprocessFolderItems(items,path=''){for(leti=0;i<items.length;i++){constentry=items[i].webkitGetAsEntry?.()||items[i]if(entry.isFile){entry.file(file=>{constfileObj=this.prepareFile(file)fileObj.path=paththis.fileList.push(fileObj)})}elseif(entry.isDirectory){constdirReader=entry.createReader()dirReader.readEntries(entries=>{this.processFolderItems(entries,`${path}${entry.name}/`)})}}},// 简单加密函数（演示用，实际应该使用更强大的加密算法）simpleEncrypt(data){// 这里应该使用Web Crypto API或其他加密库// 仅为演示，实际项目中请勿使用这种简单加密returnbtoa(unescape(encodeURIComponent(data)))}}}

2. 兼容IE8的polyfills和hack 💩

// polyfills.js// 兼容IE8的File API polyfillif(typeofFile==='undefined'){functionFile(){// 简陋的模拟实现}}// 兼容IE8的Blob polyfillif(typeofBlob==='undefined'){functionBlob(){// 简陋的模拟实现}}// 兼容IE8的FormData polyfillif(typeofFormData==='undefined'){functionFormData(){this.data=[]this.append=function(key,value){this.data.push({key:key,value:value})}}}// 兼容旧版浏览器的requestAnimationFrameif(!window.requestAnimationFrame){window.requestAnimationFrame=function(callback){returnsetTimeout(callback,1000/60)}}// 兼容旧版浏览器的fetch APIif(!window.fetch){window.fetch=function(url,options){returnnewPromise(function(resolve,reject){varxhr=newXMLHttpRequest()xhr.open(options.method||'GET',url)if(options.headers){Object.keys(options.headers).forEach(function(key){xhr.setRequestHeader(key,options.headers[key])})}xhr.onload=function(){resolve({status:xhr.status,json:function(){returnPromise.resolve(JSON.parse(xhr.responseText))},text:function(){returnPromise.resolve(xhr.responseText)}})}xhr.onerror=reject xhr.send(options.body)})}}