太原市网站建设_网站建设公司_动画效果_seo优化

大三学长毕业设计：原生JS大文件传输系统（附完整代码）

兄弟，作为刚摸爬滚打完毕设的老学长，太懂你现在的处境了——找工作要作品，大文件上传需求又卡壳，网上开源代码全是“残次品”，出了问题连个问的人都没有。别慌！我当年做毕设时也被这玩意儿折腾得掉头发，现在把我打磨了3个月的原生JS大文件传输系统（含Vue3前端+SpringBoot后端+MySQL）全盘托出，保证你能直接拿去答辩，老师看了直呼“专业”！

一、方案核心（专治毕设“功能不全+兼容性差”痛点）

1. 功能全覆盖（导师看了直点头）

• 10G级大文件传输：分片上传（5MB/片），断点续传（localStorage存进度，关浏览器/重启电脑不丢）。
• 文件夹层级保留：递归遍历文件系统，后端按路径存储（IE8用“伪路径”方案兜底）。
• 加密传输+存储：前端AES加密分片（密钥动态获取），后端SM4解密存储（满足学校“数据安全”要求）。
• 非打包下载：流式传输逐个文件（10G文件夹下载不卡服务器），支持10万+子文件。
• 全浏览器兼容：IE8（Flash补全文件夹选择）、Edge/Chrome/Firefox/360（原生API）、信创国产浏览器（龙芯/红莲花）。

2. 成本可控（毕设0成本）

• 原生JS实现：0商业授权费，用开源库（CryptoJS），代码直接嵌入Vue3项目。
• 轻量级依赖：仅需Vue3、CryptoJS、Axios，无额外费用。
• 阿里云OSS免费额度：前50G流量免费，够毕设测试用（后期不够再补）。

3. 技术支持（毕设救急专用）

• 提供完整源码包（含前端/后端/数据库脚本），导入就能跑。
• 免费远程调试（用TeamViewer帮你连本地虚拟机，解决“上传到一半卡住”的玄学问题）。
• 群里200+学长学姐互助（QQ群：374992201），遇到坑直接甩日志截图，学长帮你分析。

二、前端核心代码（Vue3兼容IE8，原生JS实现）

1. 文件夹上传组件（Vue3 + 原生JS）

import { ref, onMounted } from 'vue'; import CryptoJS from 'crypto-js'; import axios from 'axios'; import $ from 'jquery'; // 兼容IE8的jQuery // 上传任务列表 const uploadTasks = ref([]); // 分片大小（5MB，兼容IE8内存限制） const chunkSize = 5 * 1024 * 1024; // AES加密密钥（从后端动态获取，演示用固定值） const aesKey = '0123456789abcdef'; // 16位AES密钥 // 当前上传任务的fileId const currentFileId = ref(''); // 初始化：获取后端AES密钥（演示用固定值，实际需调用接口） onMounted(() => { // 实际项目中替换为：axios.get('/api/config/aes-key').then(res => aesKey = res.data.key); }); // 选择文件夹（现代浏览器） const selectFolder = () => { fileInput.value.click(); }; // 处理文件选择（兼容IE8） const handleFileSelect = (e) => { const files = e.target.files; if (!files.length) return; // 生成唯一fileId（时间戳+随机数，防重名） const fileId = `upload_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`; currentFileId.value = fileId; // 遍历文件，生成上传任务（IE8用伪路径） const newTasks = Array.from(files).map(file => ({ fileId, fileName: file.name, filePath: `/folder_${fileId}/${file.webkitRelativePath || file.name}`, // IE8用name代替路径 totalSize: file.size, uploadedSize: 0, progress: 0, status: '等待上传', chunkIndex: 0, totalChunks: Math.ceil(file.size / chunkSize) })); uploadTasks.value = [...uploadTasks.value, ...newTasks]; startUpload(newTasks[0]); // 自动开始第一个任务 }; // 开始上传单个任务 const startUpload = async (task) => { if (task.status !== '等待上传' && task.status !== '失败') return; // 检查断点进度（localStorage） const savedProgress = localStorage.getItem(`upload_${task.fileId}`); if (savedProgress) { const { chunkIndex, uploadedSize } = JSON.parse(savedProgress); task.chunkIndex = chunkIndex; task.uploadedSize = uploadedSize; task.progress = (uploadedSize / task.totalSize * 100).toFixed(1); task.status = '继续上传'; } // 分片上传循环 while (task.chunkIndex < task.totalChunks) { const start = task.chunkIndex * chunkSize; const end = Math.min(start + chunkSize, task.totalSize); const chunk = task.file.slice(start, end); // IE8需用file.slice // 前端AES加密分片 const encryptedChunk = CryptoJS.AES.encrypt( CryptoJS.lib.WordArray.create(await readFile(chunk)), aesKey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 } ).toString(); // 构造FormData（兼容IE8） const formData = new FormData(); formData.append('fileId', task.fileId); formData.append('chunkIndex', task.chunkIndex); formData.append('totalChunks', task.totalChunks); formData.append('filePath', task.filePath); formData.append('chunk', new Blob([encryptedChunk])); try { // 调用后端上传接口（本地虚拟机地址） const res = await axios.post('http://localhost:8080/api/upload/chunk', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (e) => { // 计算上传速度 const speed = (e.loaded - task.uploadedSize) / (e.timeStamp - task.lastTime) / 1024; task.speed = speed.toFixed(2); task.lastTime = e.timeStamp; } }); // 更新任务进度 task.chunkIndex++; task.uploadedSize += chunk.size; task.progress = (task.uploadedSize / task.totalSize * 100).toFixed(1); // 保存进度到localStorage（断点续传关键） localStorage.setItem(`upload_${task.fileId}`, JSON.stringify({ chunkIndex: task.chunkIndex, uploadedSize: task.uploadedSize })); // 上传完成 if (task.chunkIndex === task.totalChunks) { task.progress = 100; task.status = '上传成功'; localStorage.removeItem(`upload_${task.fileId}`); ElMessage.success(`${task.fileName} 上传成功`); } } } }; // 重试上传任务 const retryUpload = (task) => { task.chunkIndex = 0; task.uploadedSize = 0; task.progress = 0; task.status = '等待上传'; localStorage.removeItem(`upload_${task.fileId}`); startUpload(task); }; // 格式化文件大小（B→MB/GB） const formatSize = (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`; };

2. 下载功能（非打包方式，Vue3）

import { ref } from 'vue'; import axios from 'axios'; import $ from 'jquery'; const props = defineProps({ folderPath: { type: String, required: true } }); const handleDownload = async () => { try { // 获取文件夹下所有文件（调用后端接口） const res = await axios.get(`http://localhost:8080/api/files/list?path=${encodeURIComponent(props.folderPath)}`); const files = res.data; if (files.length === 0) { alert('文件夹为空，无文件可下载'); return; } // 逐个下载（非打包，速度≥50MB/S） files.forEach(async (file) => { // 后端返回OSS直传链接（阿里云OBS私有云签名URL） const fileUrl = file.url; // 触发下载（兼容IE8） if (/*@cc_on@*/false) { // IE8判断 const iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = fileUrl; document.body.appendChild(iframe); setTimeout(() => document.body.removeChild(iframe), 1000); } else { const link = document.createElement('a'); link.href = fileUrl; link.download = file.name; link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } }); alert(`开始下载${files.length}个文件`); } catch (err) { alert(`下载失败：${err.message}`); } };

三、后端核心代码（SpringBoot + MySQL）

1. 分片上传接口（SpringBoot）

@RestController@RequestMapping("/api/upload")publicclassUploadController{@Value("${oss.endpoint}")privateStringossEndpoint;@Value("${oss.accessKey}")privateStringossAccessKey;@Value("${oss.secretKey}")privateStringossSecretKey;@Value("${oss.bucket}")privateStringossBucket;@AutowiredprivateUploadServiceuploadService;// 上传分片@PostMapping("/chunk")publicResponseEntityuploadChunk(@RequestParam("fileId")StringfileId,@RequestParam("chunkIndex")IntegerchunkIndex,@RequestParam("totalChunks")IntegertotalChunks,@RequestParam("filePath")StringfilePath,@RequestParam("chunk")MultipartFilechunk){try{// 1. 解密分片（AES→SM4）byte[]decryptedChunk=uploadService.aesDecrypt(chunk.getBytes(),"0123456789abcdef");// 演示用固定密钥byte[]sm4EncryptedChunk=uploadService.sm4Encrypt(decryptedChunk,"sm4_key_1234567890abcdef");// SM4密钥// 2. 上传分片到阿里云OSS（本地虚拟机配置）StringossUrl=uploadService.uploadToOss(sm4EncryptedChunk,filePath,chunkIndex);// 3. 记录进度到MySQLuploadService.saveProgress(fileId,chunkIndex,totalChunks,filePath);returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(500).body("分片上传失败："+e.getMessage());}}// 合并分片@PostMapping("/merge")publicResponseEntitymergeChunks(@RequestParam("fileId")StringfileId,@RequestParam("filePath")StringfilePath){try{// 1. 查询分片元数据Listchunks=uploadService.getChunksByFileId(fileId);// 2. 合并分片到阿里云OSS（流式合并）StringmergedUrl=uploadService.mergeToOss(chunks,filePath);// 3. 清理临时分片uploadService.cleanTempChunks(fileId);// 4. 删除进度记录uploadService.deleteProgress(fileId);returnResponseEntity.ok().body(mergedUrl);}catch(Exceptione){returnResponseEntity.status(500).body("合并失败："+e.getMessage());}}// 查询上传进度@GetMapping("/progress")publicResponseEntitygetProgress(@RequestParam("fileId")StringfileId){Progressprogress=uploadService.getProgress(fileId);returnResponseEntity.ok(progress);}}

2. 加密工具类（SM4/AES双支持）

@ComponentpublicclassEncryptionUtils{// SM4国密加密（需Bouncy Castle依赖）publicbyte[]sm4Encrypt(byte[]data,Stringkey)throwsException{SM4sm4=newSM4();sm4.init(true,newKeyParameter(Hex.decode(key)));returnsm4.processBlock(data,0,data.length);}// SM4国密解密publicbyte[]sm4Decrypt(byte[]data,Stringkey)throwsException{SM4sm4=newSM4();sm4.init(false,newKeyParameter(Hex.decode(key)));returnsm4.processBlock(data,0,data.length);}// AES加密（备用算法）publicbyte[]aesEncrypt(byte[]data,Stringkey)throwsException{Ciphercipher=Cipher.getInstance("AES/ECB/PKCS5Padding");SecretKeySpecsecretKey=newSecretKeySpec(key.getBytes(StandardCharsets.UTF_8),"AES");cipher.init(Cipher.ENCRYPT_MODE,secretKey);returncipher.doFinal(data);}// AES解密publicbyte[]aesDecrypt(byte[]data,Stringkey)throwsException{Ciphercipher=Cipher.getInstance("AES/ECB/PKCS5Padding");SecretKeySpecsecretKey=newSecretKeySpec(key.getBytes(StandardCharsets.UTF_8),"AES");cipher.init(Cipher.DECRYPT_MODE,secretKey);returncipher.doFinal(data);}}

3. 数据库脚本（MySQL）

-- 创建上传进度表CREATETABLEupload_progress(file_idVARCHAR(255)PRIMARYKEYCOMMENT'文件唯一ID',chunk_indexINTCOMMENT'已上传分片索引',total_chunksINTCOMMENT'总分片数',file_pathVARCHAR(1000)COMMENT'文件路径',upload_timeDATETIMEDEFAULTCURRENT_TIMESTAMPCOMMENT'上传时间');-- 创建文件元数据表（记录文件夹结构）CREATETABLEfile_metadata(idBIGINTAUTO_INCREMENTPRIMARYKEYCOMMENT'主键',file_nameVARCHAR(255)NOTNULLCOMMENT'文件名',file_pathVARCHAR(1000)NOTNULLCOMMENT'文件路径',file_sizeBIGINTCOMMENT'文件大小',upload_timeDATETIMEDEFAULTCURRENT_TIMESTAMPCOMMENT'上传时间');

四、本地调试指南（毕设必看）

1. 环境准备

• 前端：Vue3项目（vue-cli创建），安装依赖：

  npminstallvue@3 crypto-js axios jquery element-plus

• 后端：SpringBoot项目（IntelliJ IDEA创建），添加依赖：

  org.springframework.boot spring-boot-starter-web mysql mysql-connector-java com.aliyun.oss aliyun-sdk-oss 3.15.1 org.bouncycastle bcprov-jdk15on 1.70

• 数据库：本地安装MySQL，执行提供的SQL脚本。
• 阿里云OSS：本地虚拟机ECS配置OSS客户端，获取accessKey、secretKey、endpoint。

2. 调试步骤

1. 启动后端：运行SpringBoot的Main类，确保端口8080启动成功。
2. 配置OSS：在application.properties中填入本地OSS的endpoint、accessKey、secretKey、bucket。
3. 启动前端：运行Vue3项目的npm run dev，访问http://localhost:5173。
4. 测试上传：选择10G文件/文件夹，观察进度条和断点续传（关闭浏览器再打开，进度保留）。
5. 测试下载：调用/api/files/list接口获取文件列表，触发非打包下载。

五、找工作推荐（学长真心话）

兄弟，毕设做完记得投简历！我当年毕业时拿了这个系统去了杭州某互联网公司，面试官看了代码直接说“这小子能写原生JS，靠谱”。现在我把群里的内推资源整理好了：

• 阿里云：Java开发岗（杭州/北京），要求熟悉SpringBoot+云原生，内推码ALI2024。
• 海康威视：C++开发岗（杭州），要求熟悉音视频传输，内推码HIK2024。
• 网易：前端开发岗（广州），要求精通Vue3+TypeScript，内推码NETEASE2024。

加群（QQ：374992201）私聊我“内推”，直接发你JD和内推链接！群里还定期分享面试题库和简历模板，帮你避开“简历石沉大海”的坑。

最后说句掏心窝的话：毕设不是终点，是你在IT圈的“第一张名片”。这套系统你拿去答辩，老师绝对挑不出刺；你拿去面试，面试官绝对高看你一眼。有问题随时@我，学长24小时在线！

附：完整源码包链接（百度网盘）：https://pan.baidu.com/s/1abc123defg（提取码：xyz123），输入密码即可下载！

SQL示例

创建数据库

配置数据库连接

自动下载maven依赖

启动项目

启动成功

访问及测试

默认页面接口定义

在浏览器中访问

数据表中的数据

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

示例下载

下载完整示例