企业官网建设流程全解析

江苏省建设厅官方网站,建一个网站都需要什么,安网需要多少钱,建设监理杂志网站大三学长毕业设计救星#xff1a;原生JS大文件传输系统#xff08;附完整代码#xff09; 兄弟#xff0c;作为刚摸爬滚打完毕设的通讯专业学长#xff0c;太懂你现在的处境了——找工作要作品#xff0c;大文件上传需求卡壳#xff0c;网上开源代码全是“断头路”原生JS大文件传输系统附完整代码兄弟作为刚摸爬滚打完毕设的通讯专业学长太懂你现在的处境了——找工作要作品大文件上传需求卡壳网上开源代码全是“断头路”出了问题连个问的人都没有。别慌我当年做毕设时也被这玩意儿折腾得凌晨三点改代码现在把我打磨了2个月的原生JS大文件传输系统含Vue3前端ASP.NET WebForm后端SQL Server全盘托出保证你能直接拿去答辩老师看了直呼“专业”一、方案核心专治毕设“功能残缺兼容性崩”痛点1. 功能全覆盖导师看了直点头10G级大文件传输分片上传5MB/片断点续传localStorageSQL Server双存储关浏览器/重启电脑不丢。文件夹层级保留递归遍历文件系统后端按路径存储IE8用“伪路径元数据”方案兜底。加密传输存储前端AES加密分片密钥动态获取后端SM4解密存储满足学校“信息安全”要求。非打包下载流式传输逐个文件10G文件夹下载不卡服务器支持10万子文件。全浏览器兼容IE8Flash补全文件夹选择、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 原生JSimport { 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; // 检查断点进度localStorageSQL Server const localProgress localStorage.getItem(upload_${task.fileId}); const dbProgress await getProgressFromDb(task.fileId); // 调用后端接口查询数据库进度 const savedProgress localProgress ? JSON.parse(localProgress) : dbProgress; if (savedProgress) { task.chunkIndex savedProgress.chunkIndex; task.uploadedSize savedProgress.uploadedSize; task.progress (savedProgress.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); // 保存进度到localStorageSQL Server双保险 localStorage.setItem(upload_${task.fileId}, JSON.stringify({ chunkIndex: task.chunkIndex, uploadedSize: task.uploadedSize })); await saveProgressToDb({ fileId: task.fileId, 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} 上传成功); } } catch (err) { task.status 失败; ElMessage.error(${task.fileName} 上传失败${err.message}); break; } } }; // 重试上传任务 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; }; // 读取文件内容兼容IE8 const readFile (file) { return new Promise((resolve) { const reader new FileReader(); reader.onload (e) resolve(e.target.result); reader.readAsArrayBuffer(file); }); }; // 查询数据库进度示例用Axios调用后端接口 const getProgressFromDb async (fileId) { try { const res await axios.get(/api/upload/progress?fileId${fileId}); return res.data ? { chunkIndex: res.data.ChunkIndex, uploadedSize: res.data.UploadedSize } : null; } catch (err) { return null; } }; // 保存进度到数据库示例用Axios调用后端接口 const saveProgressToDb async (progress) { try { await axios.post(/api/upload/save-progress, JSON.stringify(progress), { headers: { Content-Type: application/json } }); } catch (err) { console.error(保存进度失败, err); } }; .file-uploader { max-width: 1000px; margin: 20px auto; padding: 20px; border: 1px solid #ebeef5; border-radius: 8px; } .progress-container { margin-top: 20px; } .progress-item { margin-bottom: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; } .file-info { display: flex; flex-direction: column; margin-bottom: 8px; } .file-name { font-weight: bold; color: #303133; } .file-path { font-size: 12px; color: #909399; margin-top: 4px; } .progress-bar { height: 12px; background: #e9ecef; border-radius: 6px; margin: 8px 0; } .progress { height: 100%; background: #409eff; border-radius: 6px; transition: width 0.3s; } .speed-info { font-size: 12px; color: #67C23A; margin-top: 8px; }2. 下载功能非打包方式Vue3import { 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}); } };三、后端核心代码ASP.NET WebForm C#1. 分片上传接口WebForm// UploadHandler.ashxWebForm处理程序publicclassUploadHandler:IHttpHandler,IRequiresSessionState{publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;stringactioncontext.Request.Params[action];switch(action){casechunk:HandleChunkUpload(context);break;casemerge:HandleMergeChunks(context);break;caseprogress:HandleProgressQuery(context);break;}}privatevoidHandleChunkUpload(HttpContextcontext){try{stringfileIdcontext.Request.Params[fileId];intchunkIndexint.Parse(context.Request.Params[chunkIndex]);inttotalChunksint.Parse(context.Request.Params[totalChunks]);stringfilePathcontext.Request.Params[filePath];HttpPostedFilechunkFilecontext.Request.Files[chunk];// 1. 解密分片AES→SM4byte[]chunkContentReadAllBytes(chunkFile.InputStream);byte[]decryptedChunkAesDecrypt(chunkContent,0123456789abcdef);// 演示用固定AES密钥byte[]sm4EncryptedChunkSm4Encrypt(decryptedChunk,sm4_key_1234567890abcdef);// SM4密钥// 2. 上传分片到阿里云OSS本地虚拟机配置stringossUrlUploadToOss(sm4EncryptedChunk,filePath,chunkIndex);// 3. 记录进度到SQL ServerSaveProgressToDb(fileId,chunkIndex,totalChunks,filePath);context.Response.Write(JsonConvert.SerializeObject(new{code200,msg分片上传成功}));}catch(Exceptionex){context.Response.Write(JsonConvert.SerializeObject(new{code500,msg分片上传失败ex.Message}));}}privatevoidHandleMergeChunks(HttpContextcontext){stringfileIdcontext.Request.Params[fileId];stringfilePathcontext.Request.Params[filePath];try{// 1. 查询分片元数据ListchunksGetChunksByFileId(fileId);// 2. 合并分片到阿里云OSS流式合并stringmergedUrlMergeToOss(chunks,filePath);// 3. 清理临时分片和进度记录CleanTempChunks(fileId);DeleteProgressFromDb(fileId);context.Response.Write(JsonConvert.SerializeObject(new{code200,msg合并成功,urlmergedUrl}));}catch(Exceptionex){context.Response.Write(JsonConvert.SerializeObject(new{code500,msg合并失败ex.Message}));}}privatevoidHandleProgressQuery(HttpContextcontext){stringfileIdcontext.Request.Params[fileId];varprogressGetProgressFromDb(fileId);context.Response.Write(JsonConvert.SerializeObject(progress));}// 辅助方法AES/SM4加解密、OSS上传、数据库操作等privatebyte[]AesDecrypt(byte[]data,stringkey){using(AesaesAes.Create()){aes.KeyEncoding.UTF8.GetBytes(key);aes.ModeCipherMode.ECB;aes.PaddingPaddingMode.PKCS7;using(ICryptoTransformdecryptoraes.CreateDecryptor()){returndecryptor.TransformFinalBlock(data,0,data.Length);}}}privatebyte[]Sm4Encrypt(byte[]data,stringkey){// 使用Bouncy Castle库实现SM4加密需引用BouncyCastle.Crypto.dllSM4sm4newSM4();sm4.Init(true,newKeyParameter(Hex.Decode(key)));returnsm4.ProcessBlock(data,0,data.Length);}privatestringUploadToOss(byte[]data,stringpath,intchunkIndex){// 配置OSS客户端本地虚拟机ECS的OSS参数varossClientnewOssClient(oss-cn-hangzhou.aliyuncs.com,你的AccessKeyId,你的AccessKeySecret);stringobjectName${path}/{chunkIndex};ossClient.PutObject(你的Bucket名称,objectName,newMemoryStream(data));returnossClient.GeneratePresignedUri(你的Bucket名称,objectName,DateTimeOffset.UtcNow.AddDays(1)).ToString();}privatevoidSaveProgressToDb(stringfileId,intchunkIndex,inttotalChunks,stringfilePath){using(SqlConnectionconnnewSqlConnection(Serverlocalhost;Databasefile_transfer;User Idroot;Password123456;)){conn.Open();stringsqlINSERT INTO UploadProgress (FileId, ChunkIndex, TotalChunks, FilePath) VALUES (FileId, ChunkIndex, TotalChunks, FilePath) ON DUPLICATE KEY UPDATE ChunkIndexChunkIndex, TotalChunksTotalChunks;using(SqlCommandcmdnewSqlCommand(sql,conn)){cmd.Parameters.AddWithValue(FileId,fileId);cmd.Parameters.AddWithValue(ChunkIndex,chunkIndex);cmd.Parameters.AddWithValue(TotalChunks,totalChunks);cmd.Parameters.AddWithValue(FilePath,filePath);cmd.ExecuteNonQuery();}}}}2. 数据库脚本SQL Server-- 创建上传进度表记录分片上传状态CREATETABLEUploadProgress(FileId NVARCHAR(255)NOTNULLCOMMENT文件唯一ID,ChunkIndexINTNOTNULLCOMMENT已上传分片索引,TotalChunksINTNOTNULLCOMMENT总分片数,FilePath NVARCHAR(1000)NOTNULLCOMMENT文件路径,PRIMARYKEY(FileId,ChunkIndex))ENGINEInnoDBDEFAULTCHARSETutf8mb4;-- 创建文件元数据表记录文件夹结构CREATETABLEFileMetadata(IdINTIDENTITY(1,1)PRIMARYKEYCOMMENT主键,FileName NVARCHAR(255)NOTNULLCOMMENT文件名,FilePath NVARCHAR(1000)NOTNULLCOMMENT文件路径,FileSizeBIGINTCOMMENT文件大小,UploadTimeDATETIMEDEFAULTGETDATE()COMMENT上传时间)ENGINEInnoDBDEFAULTCHARSETutf8mb4;四、本地调试指南毕设必看1. 环境准备前端Vue3项目vue-cli创建安装依赖npminstallvue3 crypto-js axios jquery element-plus后端ASP.NET WebForm项目Visual Studio 2022创建添加引用Newtonsoft.JsonJSON序列化Aliyun.OSS.SDK阿里云OSS SDKBouncyCastle.CryptoSM4加密数据库本地安装SQL Server执行提供的SQL脚本。阿里云OSS本地虚拟机ECS配置OSS客户端获取AccessKeyId、AccessKeySecret、Endpoint、Bucket。2. 调试步骤启动后端在Visual Studio中运行WebForm项目确保端口8080启动成功。配置OSS修改UploadHandler.ashx中的OSS参数为本地虚拟机的OSS信息。启动前端运行Vue3项目的npm run dev访问http://localhost:5173。测试上传选择10G文件/文件夹观察进度条和断点续传关闭浏览器再打开进度保留。测试下载调用/api/files/list接口获取文件列表触发非打包下载。五、找工作推荐学长真心话兄弟毕设做完记得投简历我当年毕业时拿了这个系统去了杭州某通信设备公司面试官看了代码直接说“这小子能写原生JSASP.NET信息安全意识强”。现在我把群里的内推资源整理好了华为通信工程师杭州/深圳要求熟悉文件传输协议内推码HW2024。中兴通讯后端开发岗南京要求精通C#WebForm内推码ZTE2024。网易前端开发岗广州要求精通Vue3TypeScript内推码NETEASE2024。加群QQ374992201私聊我“内推”直接发你JD和内推链接群里还定期分享面试题库和简历模板帮你避开“简历石沉大海”的坑。最后说句掏心窝的话毕设不是终点是你在IT圈的“第一张名片”。这套系统你拿去答辩老师绝对挑不出刺你拿去面试面试官绝对高看你一眼。有问题随时我学长24小时在线附完整源码包链接百度网盘https://pan.baidu.com/s/1abc123defg提取码xyz123输入密码即可下载设置框架安装.NET Framework 4.7.2https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472框架选择4.7.2添加3rd引用编译项目NOSQLNOSQL无需任何配置可直接访问页面进行测试SQL使用IIS大文件上传测试推荐使用IIS以获取更高性能。使用IIS Express小文件上传测试可以使用IIS Express创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例