网工大三党文件上传救星原生JS实现10G大文件上传Vue3IE8兼容兄弟作为刚入坑网络工程的山西老狗我太懂你现在的处境了——老师要10G大文件上传的毕业设计网上找的代码全是“断头路”后端还没学会前端又被兼容性卡脖子。别慌我熬了两周啃下的原生JSVue3前端全栈方案今天全盘托出保证你能直接拿给老师演示答辩时被夸“这届学生有点东西”一、方案核心专治新手村“上传难题”1. 功能全覆盖老师看了直点头10G级文件传输分片上传5MB/片断点续传localStorage缓存进度关浏览器/重启电脑不丢。文件夹层级保留递归遍历文件树前端生成相对路径后端按/文件夹/子文件路径存储IE8用“伪路径元数据”方案兜底。加密传输前端AES-256加密分片密钥动态生成后端可无缝对接SM4国密存储满足老师“安全要求”。全浏览器兼容IE8XHR2File API补丁→ Chrome/Firefox/Edge → 信创浏览器龙芯/红莲花。2. 新手友好0后端压力纯前端实现分片、加密、断点续传全在前端搞定后端只需“接收分片合并”Python/PHP/Java都能接。代码注释拉满关键步骤加注释遇到问题直接搜“注释关键词”就能解决。本地调试友好文件存F盘无需服务器用localhost就能跑通全流程。3. 学习价值高面试加分项原生JS实战不用依赖Vue/React框架直接操作DOM和浏览器API面试官问“原生JS实现上传”直接秀代码。加密算法实践手把手教你用crypto-js实现AES加密简历里写“熟悉国密算法”不是梦。兼容性调优IE8补丁、localStorage容量优化这些“边角料”是区分初级/中级程序员的关键。二、前端核心代码Vue3原生JS附详细注释1. 文件夹上传组件支持IE8信创浏览器// 兼容IE8的polyfill必须引入 import es6-promise/auto; // 补Promise import whatwg-fetch; // 补fetch if (!window.console) window.console { log: () {}, error: () {} }; // 补console // 依赖库需手动安装npm install crypto-js axios spark-md5 import CryptoJS from crypto-js; import axios from axios; import SparkMD5 from spark-md5; export default { data() { return { uploadTasks: [], // 上传任务列表核心数据 chunkSize: 5 * 1024 * 1024, // 5MB分片兼容IE8内存限制 aesKey: , // AES密钥动态生成后端可替换 currentTaskId: , // 当前上传任务的ID isUploading: false // 全局上传状态锁 }; }, mounted() { this.initAesKey(); // 初始化AES密钥首次加载时生成 this.checkResumeTasks(); // 启动时检查本地是否有未完成的任务 }, methods: { /** * 初始化AES密钥动态生成32位随机字符串 * 注意实际项目中密钥应从后端获取这里简化为前端生成 */ initAesKey() { const chars ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789; let key ; for (let i 0; i 32; i) { key chars.charAt(Math.floor(Math.random() * chars.length)); } this.aesKey key; console.log(当前AES密钥:, key); // 调试用实际需隐藏 }, /** * 触发文件选择现代浏览器选文件/文件夹 */ selectFolder() { this.$refs.fileInput.click(); }, /** * 处理文件选择兼容IE8 * param {Event} e 文件选择事件 */ handleFileSelect(e) { const files e.target.files; if (!files.length) return; // 生成唯一任务ID时间戳随机数避免重复 this.currentTaskId upload_${Date.now()}_${Math.random().toString(36).substr(2, 6)}; // 遍历文件生成上传任务IE8用伪路径 const newTasks Array.from(files).map(file ({ taskId: this.currentTaskId, fileName: file.name, // 文件名 filePath: this.getFilePath(file), // 文件路径含层级结构 totalSize: file.size, // 文件总大小 uploadedSize: 0, // 已上传大小 progress: 0, // 上传进度0-100 status: pending, // 状态pending/resuming/uploading/failed/success statusText: 等待上传, chunkIndex: 0, // 当前分片索引从0开始 totalChunks: Math.ceil(file.size / this.chunkSize), // 总分片数 file: file // 保留文件对象用于分片读取 })); this.uploadTasks newTasks; this.startUpload(newTasks[0]); // 自动开始第一个任务 }, /** * 上传下一个分片递归 * param {Object} task 当前上传任务 */ uploadNextChunk(task) { if (task.chunkIndex task.totalChunks) { // 所有分片上传完成 task.progress 100; task.status success; task.statusText 上传成功; this.isUploading false; localStorage.removeItem(upload_${task.taskId}); // 清除本地缓存 this.$message.success(${task.fileName} 上传完成); return; } // 计算当前分片的起始和结束位置 const start task.chunkIndex * this.chunkSize; const end Math.min(start this.chunkSize, task.totalSize); const chunk task.file.slice(start, end); // IE8支持File.slice // 读取分片内容并加密原生JS实现 const reader new FileReader(); reader.onload (function(chunk, task) { return function(e) { const chunkContent e.target.result; // AES加密分片密钥与后端一致 const encryptedChunk CryptoJS.AES.encrypt( CryptoJS.lib.WordArray.create(chunkContent), this.aesKey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 } ).toString(); // 构造FormData兼容IE8 const formData new FormData(); formData.append(taskId, task.taskId); formData.append(chunkIndex, task.chunkIndex); formData.append(totalChunks, task.totalChunks); formData.append(filePath, task.filePath); formData.append(chunk, new Blob([encryptedChunk])); // 调用后端上传接口Python/PHP/Java均可 axios.post(/api/upload/chunk, formData, { headers: { Content-Type: multipart/form-data }, onUploadProgress: (e) { if (e.lengthComputable) { // 计算实时上传速度KB/s const timeDiff e.timeStamp - (task.lastTime || Date.now()); const speed (e.loaded - task.uploadedSize) / (timeDiff || 1) / 1024; task.speed speed.toFixed(2); task.lastTime e.timeStamp; // 更新进度 task.uploadedSize e.loaded; task.progress Math.round((task.uploadedSize / task.totalSize) * 100); } } }).then((res) { // 分片上传成功更新状态 task.chunkIndex; task.status uploading; task.statusText 上传中${task.chunkIndex}/${task.totalChunks}; this.uploadNextChunk(task); // 递归上传下一个分片 }).catch((err) { // 上传失败标记状态 task.status failed; task.statusText 上传失败${err.response?.data?.msg || 网络错误}; this.isUploading false; }); }.bind(this); })(chunk, task); reader.readAsArrayBuffer(chunk); // 读取分片为ArrayBuffer加密需要 }, } };三、新手必看代码调试与避坑指南1. 兼容IE8的关键操作血泪经验引入polyfill必须引入es6-promise和whatwg-fetch否则IE8不支持Promise和fetch。File API补丁IE8不支持File.slice需手动引入Blob.jshttps://github.com/eligrey/Blob.js并在代码中替换file.slice为Blob.js的方法。localStorage容量IE8的localStorage容量限制为5MB大文件进度需分块存储代码中已用taskId分key存储。2. 分片上传的核心逻辑面试必问分片大小选5MB是因为IE8内存限制太大可能导致浏览器崩溃太小会增加请求次数。断点续传通过localStorage缓存已上传的分片索引和大小重启后从该位置继续上传。加密传输前端用AES加密分片后端收到后解密再存储密钥需前后端一致实际项目中建议后端生成密钥。3. 文件夹层级保留老师最关注路径生成现代浏览器用file.webkitRelativePath获取相对路径IE8用随机生成的文件夹名兜底需用户手动输入文件夹名这里简化为随机字符串。后端存储后端按filePath字段创建目录结构如/upload_123/folder_456/file.txt确保文件层级不变。四、找工作学习资源师兄的血泪经验1. 毕业设计答辩技巧重点讲兼容性现场演示IE8上传提前装好IE8虚拟机展示“关闭浏览器→重新打开→继续上传”的全流程。强调加密功能演示加密分片的生成和解密用console.log打印加密前后的数据。突出学习价值说明“原生JS实现”是为了深入理解上传原理而不是为了“炫技”。2. 学习资源推荐MDN文档查File API、FormData、localStorage的兼容性https://developer.mozilla.org/。crypto-js文档学AES加密的使用https://github.com/brix/crypto-js。Vue3官方文档补Vue3的基础语法https://cn.vuejs.org/。3. 群里资源QQ群374992201新人红包加群即送1~99元红包手慢无。作业互助群里每天布置小作业如“实现一个文件选择按钮”学长学姐在线批改。内推机会群里有200软工/网络工程专业的学长实习/校招内推优先。兄弟这套代码你拿去练手保证答辩时老师竖大拇指有问题直接甩日志到群里老狗我24小时在线帮你改。记住不会就查文档卡壳就问群友——咱网工学子不能输将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例