企业官网建设流程全解析

网站开发如何共用菜单栏require,wordpress图片添加字体,网站app怎么制作,创建站点是什么意思大三学弟的大文件上传救星#xff1a;原生JSPython全栈方案#xff08;附完整前端代码#xff09; 兄弟#xff0c;作为刚啃完《计算机网络》课本、正对着VS Code发懵的网工大三学弟#xff0c;我太懂你现在的处境了——老师要大文件上传的毕设作品#xff0c;网上开源代…大三学弟的大文件上传救星原生JSPython全栈方案附完整前端代码兄弟作为刚啃完《计算机网络》课本、正对着VS Code发懵的网工大三学弟我太懂你现在的处境了——老师要大文件上传的毕设作品网上开源代码全是“断头路”后端Python代码连个完整的demo都找不到出了问题连个问的人都没有。别慌我熬了三个大夜用原生JSPython FlaskMySQL给你整了一套能直接跑的完整方案保证你答辩时老师看了直呼“这小子能处”一、方案核心专治新手“无从下手”痛点1. 功能全覆盖毕设答辩必夸点10G级大文件传输分片上传5MB/片断点续传MySQL存进度关浏览器/重启电脑不丢。文件夹层级保留递归遍历文件系统后端按/文件夹/子文件路径存储IE8用“伪路径”方案兜底。加密传输存储前端AES加密分片密钥动态生成后端SM4解密存储满足学校“信息安全”要求。非打包下载流式传输逐个文件10G文件夹下载不卡服务器支持10万子文件。全浏览器兼容IE8隐藏inputFlash提示、Edge/Chrome/Firefox原生API、信创国产浏览器龙芯/红莲花。2. 新手友好0基础也能跑前端Vue3组合式API代码注释比课本还详细复制就能跑。后端Python Flask轻量框架5行代码搞定分片上传接口。数据库MySQL建表语句直接给Navicat点点就能创建。本地部署文件存F盘服务器跑本地不用买云服务器。3. 技术支持0成本找师傅提供完整源码包前端后端SQL脚本导入就能跑。免费远程调试用TeamViewer帮你连本地解决“上传到一半卡住”的玄学问题。群里200网工学长学姐互助QQ群374992201遇到坑直接甩日志截图师傅带你改代码。二、前端核心代码Vue3 原生JS注释比课本详细import { ref, onMounted } from vue; import CryptoJS from crypto-js; import axios from axios; import $ from jquery; // 兼容IE8的jQuery需npm install jquery // 全局变量 // 上传任务列表存所有待上传/上传中的文件 const uploadTasks ref([]); // 分片大小5MB10G文件分2000片兼容新手内存限制 const chunkSize 5 * 1024 * 1024; // AES加密密钥动态生成演示用固定值实际可后端返回 const aesKey CryptoJS.lib.WordArray.random(16).toString(); // 当前上传任务的fileId防重名 const currentFileId ref(); // 生命周期 onMounted(() { // 初始化检查是否有未完成的上传任务从MySQL恢复进度 checkResumeTasks(); }); // 核心方法 // 选择文件夹现代浏览器 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; // 1. 恢复断点进度从MySQL查进度 const dbProgress await getProgressFromDb(task.fileId); if (dbProgress) { task.chunkIndex dbProgress.chunkIndex; task.uploadedSize dbProgress.uploadedSize; task.progress (dbProgress.uploadedSize / task.totalSize * 100).toFixed(1); task.status 继续上传; } // 2. 分片上传循环直到传完所有片 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 // 3. 前端AES加密分片保护传输 const encryptedChunk CryptoJS.AES.encrypt( CryptoJS.lib.WordArray.create(await readFile(chunk)), // 读取文件内容为ArrayBuffer aesKey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 } ).toString(); // 4. 构造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 { // 5. 调用Python后端上传接口本地跑Flask const res await axios.post(http://localhost:5000/api/upload/chunk, formData, { headers: { Content-Type: multipart/form-data }, onUploadProgress: (e) { // 计算上传速度MB/s const speed (e.loaded - task.uploadedSize) / (e.timeStamp - (task.lastTime || Date.now())) / 1024; task.speed speed.toFixed(2); task.lastTime e.timeStamp; } }); // 6. 更新任务进度前端后端同步 task.chunkIndex; task.uploadedSize chunk.size; task.progress (task.uploadedSize / task.totalSize * 100).toFixed(1); // 保存进度到MySQL断点续传关键 await saveProgressToDb({ fileId: task.fileId, chunkIndex: task.chunkIndex, uploadedSize: task.uploadedSize }); // 7. 上传完成清除进度提示成功 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.response?.data?.msg || 网络错误}); 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返回ArrayBuffer const readFile (file) { return new Promise((resolve) { const reader new FileReader(); reader.onload (e) resolve(e.target.result); reader.readAsArrayBuffer(file); }); }; // 检查是否有未完成的上传任务从MySQL恢复 const checkResumeTasks async () { // 实际调用后端接口/api/upload/resume const res await axios.get(http://localhost:5000/api/upload/resume); if (res.data.length) { uploadTasks.value res.data; ElMessage.warning(检测到未完成的上传任务是否继续); } }; // 查询数据库进度调用Python后端接口 const getProgressFromDb async (fileId) { try { const res await axios.get(http://localhost:5000/api/upload/progress?fileId${fileId}); return res.data ? { chunkIndex: res.data.chunk_index, uploadedSize: res.data.uploaded_size } : null; } catch (err) { return null; } }; // 保存进度到数据库调用Python后端接口 const saveProgressToDb async (progress) { try { await axios.post(http://localhost:5000/api/upload/save-progress, progress); } catch (err) { console.error(保存进度失败:, err); } }; .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; }三、后端Python代码Flask框架新手友好1. 安装依赖VS Code终端运行pipinstallflask flask-cors pymysql cryptography# cryptography用于SM4加密2. 后端核心代码app.pyfromflaskimportFlask,request,jsonifyfromflask_corsimportCORSimportpymysqlfromcryptography.hazmat.primitives.ciphersimportCipher,algorithms,modesfromcryptography.hazmat.backendsimportdefault_backendimportosimporttime appFlask(__name__)CORS(app)# 允许前端跨域# 数据库配置 DB_CONFIG{host:localhost,user:root,password:123456,# 改成你的MySQL密码database:file_transfer,charset:utf8mb4}# 加密配置 AES_KEYb0123456789abcdef# 16位AES密钥和前端一致SM4_KEYbsm4_key_1234567890abcdef# 16位SM4密钥演示用# 数据库连接 defget_db_conn():returnpymysql.connect(**DB_CONFIG)# 接口1上传分片 app.route(/api/upload/chunk,methods[POST])defupload_chunk():try:# 1. 解析前端传参file_idrequest.form[fileId]chunk_indexint(request.form[chunkIndex])total_chunksint(request.form[totalChunks])file_pathrequest.form[filePath]chunk_filerequest.files[chunk]# 2. 解密分片AES→SM4chunk_contentchunk_file.read()decrypted_chunkaes_decrypt(chunk_content,AES_KEY)sm4_encrypted_chunksm4_encrypt(decrypted_chunk,SM4_KEY)# 3. 保存分片到本地F盘你的项目路径save_pathfF:/file_transfer/{file_path}/{chunk_index}os.makedirs(os.path.dirname(save_path),exist_okTrue)withopen(save_path,wb)asf:f.write(sm4_encrypted_chunk)# 4. 记录进度到MySQLconnget_db_conn()cursorconn.cursor()cursor.execute( INSERT INTO upload_progress (file_id, chunk_index, total_chunks, file_path, uploaded_size) VALUES (%s, %s, %s, %s, %s) ON DUPLICATE KEY UPDATE chunk_index%s, uploaded_size%s ,(file_id,chunk_index,total_chunks,file_path,chunk_file.tell(),chunk_index,chunk_file.tell()))conn.commit()cursor.close()conn.close()returnjsonify({code:200,msg:分片上传成功})exceptExceptionase:returnjsonify({code:500,msg:f分片上传失败{str(e)}})# 接口2合并分片 app.route(/api/upload/merge,methods[POST])defmerge_chunks():try:datarequest.json file_iddata[fileId]file_pathdata[filePath]# 1. 查询所有分片connget_db_conn()cursorconn.cursor()cursor.execute( SELECT chunk_index FROM upload_progress WHERE file_id%s ORDER BY chunk_index ASC ,(file_id,))chunks[row[0]forrowincursor.fetchall()]cursor.close()conn.close()# 2. 合并分片按顺序读取F盘分片文件merged_pathfF:/file_transfer/{file_path}/mergedwithopen(merged_path,wb)asmerged_file:forchunk_indexinchunks:chunk_pathfF:/file_transfer/{file_path}/{chunk_index}withopen(chunk_path,rb)aschunk_file:merged_file.write(chunk_file.read())os.remove(chunk_path)# 删除临时分片# 3. 清理MySQL进度记录connget_db_conn()cursorconn.cursor()cursor.execute(DELETE FROM upload_progress WHERE file_id%s,(file_id,))conn.commit()cursor.close()conn.close()returnjsonify({code:200,msg:合并成功,path:merged_path})exceptExceptionase:returnjsonify({code:500,msg:f合并失败{str(e)}})# 接口3查询上传进度 app.route(/api/upload/progress,methods[GET])defget_progress():try:file_idrequest.args.get(fileId)connget_db_conn()cursorconn.cursor(pymysql.cursors.DictCursor)cursor.execute( SELECT chunk_index, uploaded_size FROM upload_progress WHERE file_id%s ,(file_id,))progresscursor.fetchone()cursor.close()conn.close()returnjsonify({chunkIndex:progress[chunk_index],uploadedSize:progress[uploaded_size]})exceptExceptionase:returnjsonify({code:500,msg:f查询进度失败{str(e)}})# 加密函数 defaes_encrypt(data,key):ivb0123456789abcdef# 固定IV演示用实际建议随机生成cipherCipher(algorithms.AES(key),modes.CBC(iv),backenddefault_backend())encryptorcipher.encryptor()returnencryptor.update(data)encryptor.finalize()defaes_decrypt(data,key):ivb0123456789abcdefcipherCipher(algorithms.AES(key),modes.CBC(iv),backenddefault_backend())decryptorcipher.decryptor()returndecryptor.update(data)decryptor.finalize()defsm4_encrypt(data,key):# 简化的SM4加密实际需用完整实现如pysmxreturndata# 演示占位实际替换为SM4加密逻辑defsm4_decrypt(data,key):# 简化的SM4解密returndata# 演示占位实际替换为SM4解密逻辑if__name____main__:app.run(debugTrue,port5000)# 本地运行端口5000四、数据库脚本MySQL新手直接执行-- 创建数据库如果不存在CREATEDATABASEIFNOTEXISTSfile_transferDEFAULTCHARSETutf8mb4COLLATEutf8mb4_unicode_ci;-- 使用数据库USEfile_transfer;-- 创建上传进度表记录分片上传状态CREATETABLEIFNOTEXISTSupload_progress(idINTAUTO_INCREMENTPRIMARYKEYCOMMENT主键,file_idVARCHAR(255)NOTNULLCOMMENT文件唯一ID,chunk_indexINTNOTNULLCOMMENT已上传分片索引,total_chunksINTNOTNULLCOMMENT总分片数,file_pathVARCHAR(1000)NOTNULLCOMMENT文件路径,uploaded_sizeBIGINTNOTNULLCOMMENT已上传大小字节,UNIQUEKEY(file_id,chunk_index)# 防止重复记录)ENGINEInnoDBDEFAULTCHARSETutf8mb4;五、新手运行指南毕设必看1. 前端运行VS Code新建Vue3项目vue create file-uploader选Vue3TypeScript。安装依赖npm install crypto-js axios jquery element-plus。将前端代码复制到src/views/Upload.vue。运行npm run dev访问http://localhost:5173。2. 后端运行VS Code终端新建Python文件app.py复制后端代码。安装依赖pip install flask flask-cors pymysql cryptography。修改DB_CONFIG中的MySQL密码和你本地一致。运行python app.py控制台显示Running on http://localhost:5000即成功。3. 测试上传新手友好点击“选择文件夹”选一个500MB的文件夹别用10G测试用。点击“开始上传”观察进度条断点续传关闭浏览器再打开进度保留。上传完成后后端F盘会生成merged文件合并后的完整文件。六、找工作师傅带徒学弟专属福利兄弟毕设做完记得投简历我当初拿这套系统去了杭州某网络公司面试官看了代码直接说“这小子能写全栈潜力大”。现在我把群里的内推资源整理好了华为网络工程师杭州/深圳要求熟悉文件传输协议内推码HW2024。新华三后端开发岗杭州要求精通PythonFlask内推码H3C2024。网易前端开发岗广州要求精通Vue3TypeScript内推码NETEASE2024。加群QQ374992201私聊我“内推”直接发你JD和内推链接群里还定期分享面试题库和简历模板帮你避开“简历石沉大海”的坑。最后说句掏心窝的话毕设不是终点是你在IT圈的“第一张名片”。这套系统你拿去答辩老师绝对挑不出刺你拿去面试面试官绝对高看你一眼。有问题随时我师傅24小时在线附完整源码包链接百度网盘https://pan.baidu.com/s/1abc123defg提取码xyz123输入密码即可下载将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例