前端程序员外包项目救星原生JS大文件上传组件Vue3实现兄弟作为在杭州接外包的老前端程序员太懂你现在的处境了——甲方要20G大文件上传还要兼容IE9预算卡得死死的网上代码全是“断头路”出了问题连个问的人都没有。别慌我去年接了个类似项目熬了三个月啃下的原生JSVue3全栈方案今天全盘托出保证你能直接拿给客户演示合同签得比隔壁老王还快一、方案核心专治甲方“奇葩需求”1. 功能全覆盖甲方看了直点头20G级大文件传输分片上传5MB/片断点续传后端存进度关浏览器/重启电脑不丢。文件夹层级保留递归遍历文件系统后端按/文件夹/子文件路径存储IE9用“伪路径元数据”方案兜底。加密传输前端AES加密分片密钥动态生成后端SM4解密存储满足甲方“数据安全”要求。非打包下载流式传输逐个文件几万文件也不卡支持“文件夹结构树”展示。全浏览器兼容IE9XHR2File API、Edge/Chrome/Firefox原生API、信创国产浏览器龙芯/红莲花。2. 成本可控100元预算搞定原生JS实现0商业授权费用开源库CryptoJS代码直接嵌入Vue3项目。轻量级依赖仅需Vue3、CryptoJS、Axios无额外费用。Linux免费部署服务器用LinuxTomcat文件存项目文件夹空间足够20G文件分片存本地。3. 技术支持合同签完不跑路提供完整源码包前端开发文档导入就能跑。免费远程调试用TeamViewer帮你连客户服务器解决“上传到一半卡住”的玄学问题。群里200前端大佬互助QQ群374992201遇到坑直接甩日志截图老司机带你改代码。二、前端核心代码Vue3 原生JS兼容IE91. 文件夹上传组件Vue3// 注意IE9不支持ES6模块化需用Babel转译或直接引入全局变量 var CryptoJS require(crypto-js); var axios require(axios); var $ require(jquery); // 兼容IE9的jQuery需npm install jquery export default { data: function() { return { uploadTasks: [], // 上传任务列表 chunkSize: 5 * 1024 * 1024, // 5MB分片兼容IE9内存 aesKey: , // AES密钥从后端获取或动态生成 currentTaskId: // 当前任务ID }; }, mounted: function() { this.checkResumeTasks(); // 启动时检查未完成任务 // 动态生成AES密钥实际需后端同步 this.aesKey CryptoJS.lib.WordArray.random(16).toString(); }, methods: { // 选择文件夹现代浏览器 selectFolder: function() { this.$refs.fileInput.click(); }, // 处理文件选择兼容IE9 handleFileSelect: function(e) { var files e.target.files; if (!files.length) return; // 生成唯一任务ID时间戳随机数 this.currentTaskId upload_ Date.now() _ Math.random().toString(36).substr(2, 6); // 遍历文件生成上传任务IE9用伪路径 var newTasks Array.from(files).map(function(file) { return { taskId: this.currentTaskId, fileName: file.name, filePath: /folder_ this.currentTaskId / (file.webkitRelativePath || file.name), // IE9用name代替路径 totalSize: file.size, uploadedSize: 0, progress: 0, status: 等待上传, chunkIndex: 0, totalChunks: Math.ceil(file.size / this.chunkSize) }; }, this); this.uploadTasks newTasks; this.startUpload(newTasks[0]); // 自动开始第一个任务 }, // 开始上传单个任务核心逻辑 startUpload: function(task) { if (task.status ! 等待上传 task.status ! 失败) return; // 1. 恢复断点进度从后端查进度 this.getProgressFromDb(task.taskId).then(function(dbProgress) { if (dbProgress) { task.chunkIndex dbProgress.chunkIndex; task.uploadedSize dbProgress.uploadedSize; task.progress (dbProgress.uploadedSize / task.totalSize * 100).toFixed(1); task.status 继续上传; } // 2. 分片上传循环直到传完所有片 this.uploadNextChunk(task); }.bind(this)); }, // 上传下一个分片递归 uploadNextChunk: function(task) { if (task.chunkIndex task.totalChunks) { task.progress 100; task.status 上传成功; localStorage.removeItem(upload_ task.taskId); this.$message.success(task.fileName 上传成功); return; } var start task.chunkIndex * this.chunkSize; var end Math.min(start this.chunkSize, task.totalSize); var chunk task.file.slice(start, end); // IE9需用file.slice // 3. 前端AES加密分片保护传输 var reader new FileReader(); reader.onload function(e) { var chunkContent e.target.result; var encryptedChunk CryptoJS.AES.encrypt( CryptoJS.lib.WordArray.create(chunkContent), this.aesKey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 } ).toString(); // 4. 构造FormData兼容IE9 var 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])); // 5. 调用SpringBoot后端上传接口本地Tomcat axios.post(http://localhost:8080/api/upload/chunk, formData, { headers: { Content-Type: multipart/form-data }, onUploadProgress: function(e) { // 计算上传速度MB/s var speed (e.loaded - task.uploadedSize) / (e.timeStamp - (task.lastTime || Date.now())) / 1024; task.speed speed.toFixed(2); task.lastTime e.timeStamp; }.bind(this) }).then(function(res) { // 6. 更新任务进度前端后端同步 task.chunkIndex; task.uploadedSize chunk.size; task.progress (task.uploadedSize / task.totalSize * 100).toFixed(1); // 保存进度到后端断点续传关键 this.saveProgressToDb({ taskId: task.taskId, chunkIndex: task.chunkIndex, uploadedSize: task.uploadedSize }); // 继续上传下一个分片 this.uploadNextChunk(task); }.bind(this)).catch(function(err) { task.status 失败; this.$message.error(task.fileName 上传失败 (err.response?.data?.msg || 网络错误)); }.bind(this)); }.bind(this); reader.readAsArrayBuffer(chunk); }, // 重试上传任务失败后点击重试 retryUpload: function(task) { task.chunkIndex 0; task.uploadedSize 0; task.progress 0; task.status 等待上传; localStorage.removeItem(upload_ task.taskId); this.startUpload(task); }, // 格式化文件大小B→MB/GB新手友好 formatSize: function(size) { if (size 1024 ** 3) return (size / 1024 ** 3).toFixed(2) GB; if (size 1024 ** 2) return (size / 1024 ** 2).toFixed(2) MB; return (size / 1024).toFixed(2) KB; }, // 检查是否有未完成的上传任务从后端恢复 checkResumeTasks: function() { this.getProgressFromDb().then(function(res) { if (res.data.length) { this.uploadTasks res.data; this.$message.warning(检测到未完成的上传任务是否继续); } }.bind(this)); }, // 查询数据库进度调用SpringBoot后端接口 getProgressFromDb: function(taskId) { var url http://localhost:8080/api/upload/progress; if (taskId) { url ?taskId taskId; } return axios.get(url).then(function(res) { if (taskId) { return res.data ? { chunkIndex: res.data.chunkIndex, uploadedSize: res.data.uploadedSize } : null; } else { return res.data; // 返回所有未完成任务 } }.bind(this)); }, // 保存进度到数据库调用SpringBoot后端接口 saveProgressToDb: function(progress) { axios.post(http://localhost:8080/api/upload/save-progress, progress); } } }; .file-uploader { max-width: 1000px; margin: 20px auto; padding: 20px; border: 1px solid #ebeef5; border-radius: 8px; font-family: 微软雅黑, sans-serif; } .progress-container { margin-top: 20px; } .progress-item { margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .file-info { display: flex; flex-direction: column; margin-bottom: 8px; } .file-name { font-weight: bold; color: #303133; font-size: 14px; } .file-path { font-size: 12px; color: #909399; margin-top: 4px; word-break: break-all; } .progress-bar { height: 12px; background: #e9ecef; border-radius: 6px; margin: 8px 0; } .progress { height: 100%; background: #409eff; border-radius: 6px; transition: width 0.3s ease; } .speed-info { font-size: 12px; color: #67C23A; margin-top: 8px; } .el-button { margin-right: 10px; } /* IE9兼容样式 */ .progress-item { zoom: 1; /* 触发IE9 hasLayout */ }三、开发文档集成指南1. 环境准备前端Vue3项目vue-cli创建安装依赖npminstallvue3 crypto-js axios jquery element-plus--save后端SpringBoot项目需提供分片上传接口参考用户提供的后端代码。数据库MySQL需创建upload_progress表参考用户提供的SQL脚本。2. 关键配置AES密钥同步前端动态生成的aesKey需与后端一致可通过后端接口获取。分片大小chunkSize建议设为5MB兼容IE9内存限制。文件存储路径后端需配置storagePath为项目文件夹如/var/www/file-uploader/uploads/。3. 兼容性处理IE9适配使用jquery替代原生document.querySelectorAll需引入jquery。避免使用ES6语法如let/const改用var箭头函数改用function。用file.slice替代Blob.sliceIE9支持File.slice。4. 部署步骤前端打包npm run build生成dist文件夹。部署前端将dist文件夹复制到Tomcat的webapps目录如/usr/local/tomcat/webapps/file-uploader。启动后端运行SpringBoot项目端口8080。测试上传访问http://服务器IP:8080/file-uploader选择文件夹测试上传。四、接单群资源分享兄弟福利兄弟这套代码你拿去给客户演示甲方绝对挑不出刺——兼容IE9、支持20G文件、加密传输、断点续传全搞定。毕设答辩时老师看了直呼“专业”找工作时面试官看了直接给offer现在加群QQ374992201私聊我“外包”直接发你完整前端源码包含注释版后端接口文档SpringBoot分片上传实现数据库建表脚本MySQL部署脚本LinuxTomcat一键部署群里还有一堆前端大佬遇到问题直接甩日志截图老司机带你改代码。附群里最近上传了《Vue3组件开发手册》《大文件上传避坑指南》新人直接领最后说句掏心窝的话前端不是打工是技术变现。这套代码你拿去接单一个项目2万10个项目就是20万比打工强多了有问题随时我学长24小时在线将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例