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

网页如何实现大文件上传的暂停与继续功能？

news 2026/7/16 13:31:30

《一个通讯专业菜鸟的"10G文件上传"奇幻漂流记》

前情提要：毕业设计の绝望

大家好！我是福州某高校通讯专业大三"准失业人员"。眼瞅着要毕业了，导师说：“做个文件管理系统当毕设吧，找工作也有个作品！” 我心想这还不简单？直到我看到需求文档…

需求清单：

10G文件上传（我U盘才8G啊喂！）
支持IE8（这玩意儿比我年纪都大！）
断点续传要能抗关机（这需求是灭霸提的吧？）
免费7×24技术支持（导师您看我像慈善机构吗？）
预算：0元（还倒贴电费！）

技术选型：在作死的边缘试探

前端部分（Vue3 + 原生JS混合双打）

// 大文件分片上传示例（纯原生JS版）classBigFileUploader{constructor(){this.chunkSize=5*1024*1024;// 5MB一片this.offlineStorageKey='upload-progress';// 离线存储键名}// 加密分片（祖传Base64加密法）encryptChunk(chunk){returnbtoa(unescape(encodeURIComponent(chunk)));}// 拯救IE8的IndexedDB polyfillinitDB(){if(!window.indexedDB){alert('建议您换个现代浏览器，别为难自己了！');returnPromise.reject('IE8去死吧');}// 这里省略100行兼容代码...}// 断点续传核心逻辑resumeUpload(file){consttotalChunks=Math.ceil(file.size/this.chunkSize);letsavedProgress=localStorage.getItem(this.offlineStorageKey)||0;// 从断点开始上传for(leti=savedProgress;i<totalChunks;i++){constchunk=file.slice(i*this.chunkSize,(i+1)*this.chunkSize);this.uploadChunk(chunk,i).then(()=>{localStorage.setItem(this.offlineStorageKey,i+1);});}}}

后端部分（ASP.NET WebForm老古董版）

// 文件分片接收接口publicclassUploadHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){// 处理来自石器时代IE8的请求if(context.Request.Browser.Browser=="IE"&&context.Request.Browser.MajorVersion<=8){context.Response.Write("{\"error\":\"建议您换个现代浏览器\"}");return;}try{varfile=context.Request.Files[0];varchunkIndex=int.Parse(context.Request["chunkIndex"]);varisEncrypted=bool.Parse(context.Request["isEncrypted"]);// 解密处理（Base64祖传解密法）byte[]fileData;using(varms=newMemoryStream()){file.InputStream.CopyTo(ms);fileData=isEncrypted?Convert.FromBase64String(Encoding.UTF8.GetString(ms.ToArray())):ms.ToArray();}// 存储分片到临时目录vartempPath=$"D:\\temp\\{file.FileName}_{chunkIndex}";File.WriteAllBytes(tempPath,fileData);context.Response.Write("{\"success\":true}");}catch(Exceptionex){context.Response.Write($"{{\"error\":\"{ex.Message}\"}}");}}}

兼容性解决方案（人类迷惑行为大赏）

浏览器	解决方案	副作用
IE8	使用Flash插件（Adobe已停止支持）	用户可能会先安装病毒
龙芯浏览器	降级到jQuery 1.x	代码量增加300%
Windows 7老机器	禁用所有现代API	体验回到2009年
导师的期望	假装所有功能都实现了	答辩可能翻车