企业官网建设流程全解析

网站前端设计是什么意思,北京 seo,响应式布局实训报告,手机优化网站建设Java老哥外包救星#xff1a;原生JS大文件上传全栈方案#xff08;IE9兼容20G断点续传#xff09; 兄弟#xff0c;作为甘肃接外包的Java程序员#xff0c;我太懂你现在的处境了——客户要20G大文件上传#xff0c;还要文件夹层级保留、IE9兼容、加密传输#xff0c;预…Java老哥外包救星原生JS大文件上传全栈方案IE9兼容20G断点续传兄弟作为甘肃接外包的Java程序员我太懂你现在的处境了——客户要20G大文件上传还要文件夹层级保留、IE9兼容、加密传输预算还卡得死死的。网上找的代码全是“文件上传半成品”文件夹功能要么丢层级要么IE9直接崩。别慌我熬了半个月啃下的原生JSSpringBoot全栈方案今天全盘托出保证你能直接给客户演示验收时被夸“这钱花得值”一、方案核心专治外包项目的“奇葩需求”1. 功能全覆盖客户看了直点头20G级大文件传输分片上传10MB/片断点续传localStorageMySQL双存储进度关浏览器/重启电脑不丢。文件夹层级保留递归遍历文件树前端生成相对路径后端按/父文件夹/子文件路径存储IE9用“伪路径元数据”方案兜底。加密传输存储传输层HTTPSAES-256密钥动态生成存储层SM4国密算法符合客户保密要求。非打包下载流式传输逐个文件几万文件也不卡支持“文件夹结构树”展示避免服务器内存爆炸。全浏览器兼容IE9XHR2File API补丁→ Edge/Chrome/Firefox → macOS/Linux/CentOS信创环境。2. 预算友好0商业授权费原生JS实现0商业库用crypto-jsAESspark-md5文件哈希代码直接嵌入Vue3项目。轻量级依赖仅需Vue3、axios、crypto-js无额外费用。本地存储适配文件直接存服务器Tomcat部署路径可配置无需OSS代码动态适配Windows/Linux。3. 客户要的“铁证”全给齐完整源码包前端后端SQL脚本导入就能跑。部署文档Tomcat配置MySQL连接文件路径设置手把手教客户运维。7*24小时支持群里200Java/前端大佬互助QQ群374992201遇到坑直接甩日志截图老炮儿带你改。二、前端核心代码Vue3兼容版附详细注释1. 文件夹上传组件兼容IE9所有主流浏览器// 兼容IE9的polyfill必须引入 import es6-promise/auto; // 补Promise import whatwg-fetch; // 补fetch import Blob from blob-polyfill; // 补BlobIE9不支持slice 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: 10 * 1024 * 1024, // 10MB分片20G文件分2000片平衡速度与内存 aesKey: , // AES密钥从后端动态获取 currentTaskId: , // 当前上传任务的ID isUploading: false // 全局上传状态锁 }; }, mounted() { this.initAesKey(); // 初始化AES密钥首次加载时生成 this.checkResumeTasks(); // 启动时检查本地是否有未完成的任务 }, methods: { /** * 检查本地是否有未完成的上传任务启动时自动执行 */ checkResumeTasks() { // 遍历localStorage所有key实际项目中需优化这里简化 for (let i 0; i localStorage.length; i) { const key localStorage.key(i); if (key.startsWith(upload_)) { const taskData JSON.parse(localStorage.getItem(key)); this.uploadTasks.push(taskData); } } if (this.uploadTasks.length 0) { this.$message.warning(检测到未完成的上传任务是否继续); } } } };三、后端核心代码SpringBoot附关键逻辑1. 分片上传接口ChunkController.java// src/main/java/com/example/uploader/controller/ChunkController.javaRestControllerRequestMapping(/api/upload)publicclassChunkController{Value(${upload.chunk.size})privatelongchunkSize;AutowiredprivateUploadServiceuploadService;/** * 分片上传接口 */PostMapping(/chunk)publicResponseEntityuploadChunk(RequestParam(taskId)StringtaskId,RequestParam(chunkIndex)intchunkIndex,RequestParam(totalChunks)inttotalChunks,RequestParam(filePath)StringfilePath,RequestParam(chunk)MultipartFilechunk){try{// 1. 解密分片AES-256byte[]encryptedDatachunk.getBytes();StringaesKeyuploadService.getAesKeyFromKms();// 从KMS获取动态密钥byte[]decryptedDatauploadService.aesDecrypt(encryptedData,aesKey);// 2. 创建存储目录兼容Linux/WindowsStringstoragePathuploadService.getStoragePath()filePath;FiledirnewFile(storagePath);if(!dir.exists()){dir.mkdirs();// 递归创建目录}// 3. 保存分片到服务器非打包StringchunkPathstoragePathFile.separatorchunkIndex;FilechunkFilenewFile(chunkPath);FileUtils.writeByteArrayToFile(chunkFile,decryptedData);// 使用Apache Commons IO// 4. 记录进度到MySQL断点续传关键UploadProgressprogressnewUploadProgress();progress.setTaskId(taskId);progress.setFilePath(filePath);progress.setChunkIndex(chunkIndex);progress.setTotalChunks(totalChunks);progress.setUploadedSize(decryptedData.length);progress.setStatus(UPLOADING);uploadService.saveOrUpdateProgress(progress);returnResponseEntity.ok().body(Result.success(分片上传成功));}catch(Exceptione){e.printStackTrace();returnResponseEntity.status(500).body(Result.error(上传失败e.getMessage()));}}}2. 断点续传进度服务UploadService.java// src/main/java/com/example/uploader/service/UploadService.javaServicepublicclassUploadService{AutowiredprivateUploadProgressMapperprogressMapper;Value(${upload.storage.path})privateStringstoragePath;Value(${encryption.aes.key})privateStringaesKey;/** * 保存或更新上传进度支持MySQL */publicvoidsaveOrUpdateProgress(UploadProgressprogress){UploadProgressexistingprogressMapper.selectByTaskIdAndFilePathAndChunkIndex(progress.getTaskId(),progress.getFilePath(),progress.getChunkIndex());if(existing!null){progress.setId(existing.getId());progressMapper.updateById(progress);}else{progressMapper.insert(progress);}}}3. 下载接口DownloadController.java// src/main/java/com/example/uploader/controller/DownloadController.javaRestControllerRequestMapping(/api/download)publicclassDownloadController{AutowiredprivateUploadServiceuploadService;/** * 非打包下载文件夹流式传输 */GetMapping(/folder)publicvoiddownloadFolder(RequestParam(taskId)StringtaskId,RequestParam(filePath)StringfilePath,HttpServletResponseresponse)throwsIOException{// 1. 验证下载权限根据业务ID校验if(!uploadService.validateDownloadPermission(taskId)){response.sendError(403,无下载权限);return;}// 2. 获取文件夹下所有文件列表从数据库查询ListfileListuploadService.getFileListByPath(filePath);// 3. 设置响应头非打包response.setContentType(application/octet-stream);response.setHeader(Content-Disposition,attachment; filename\filePath\);// 4. 流式传输每个文件避免内存溢出for(FileInfofile:fileList){InputStreamfileStreamnewFileInputStream(file.getPhysicalPath());IOUtils.copy(fileStream,response.getOutputStream());response.getOutputStream().flush();}response.getOutputStream().close();}}四、数据库脚本MySQL-- 创建上传进度表记录分片上传状态CREATETABLEIFNOTEXISTSupload_progress(idINTUNSIGNEDAUTO_INCREMENTPRIMARYKEY,task_idVARCHAR(255)NOTNULLCOMMENT任务ID如upload_1620000000_abc123,file_pathVARCHAR(1000)NOTNULLCOMMENT文件存储路径如/upload_1620000000/folder_123/file.txt,chunk_indexINTUNSIGNEDNOTNULLCOMMENT当前分片索引0开始,total_chunksINTUNSIGNEDNOTNULLCOMMENT总分片数,uploaded_sizeBIGINTUNSIGNEDNOTNULLCOMMENT已上传大小字节,statusVARCHAR(50)NOTNULLDEFAULTPENDINGCOMMENT状态PENDING/RESUMING/UPLOADING/FAILED/SUCCESS,create_timeTIMESTAMPDEFAULTCURRENT_TIMESTAMPCOMMENT创建时间,update_timeTIMESTAMPDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMPCOMMENT更新时间)ENGINEInnoDBDEFAULTCHARSETutf8mb4;-- 唯一约束防止同一任务同一分片重复记录CREATEUNIQUEINDEXUQ_Task_File_ChunkONupload_progress(task_id,file_path,chunk_index);五、部署与兼容性调试客户最关心的1. IE9兼容性客户老机器必过File API补丁引入Blob.jshttps://github.com/eligrey/Blob.js解决File.slice不支持问题代码中已预留位置需在index.html中引入。FormData兼容IE9不支持FormData代码中已用iframe模拟上传无需额外处理前端自动降级。localStorage容量IE9的localStorage容量限制为5MB大文件进度需分块存储代码中已用taskId分key存储。2. 大文件分片20G传输关键分片大小选10MB是因为IE9内存限制太大可能导致浏览器崩溃太小会增加请求次数实际可根据客户网络调整。断点续传前端用localStorage缓存已上传的分片索引和大小后端用MySQL记录双重保障客户重启电脑也能续传。3. 文件夹层级保留客户核心需求路径生成现代浏览器用file.webkitRelativePath获取相对路径IE9用随机生成的文件夹名兜底需用户手动输入文件夹名这里简化为随机字符串。后端存储后端按filePath字段创建目录结构如E:/uploads/upload_1620000000/folder_123/file.txt确保层级不变。六、预算与合作模式客户最关心的1. 预算控制100元以内源码一次性交付提供完整前端Vue3组件、后端SpringBoot代码、数据库脚本无后续授权费。免费技术支持7*24小时远程协助故障排查、版本升级、兼容性调试。2. 合作材料满足客户采购要求项目证明提供过往外包项目合同含项目名称、金额、验收报告。技术资质Java开发工具授权IntelliJ IDEA、服务器配置文档TomcatMySQL。兄弟这套方案你拿给客户演示保证验收时客户拍大腿说“这钱花得值”有问题直接甩日志到群里QQ群374992201老炮儿我24小时在线帮你改。记住不会就查文档卡壳就问群友——咱Java程序员接外包就是要“稳准狠”导入项目导入到Eclipse点南查看教程导入到IDEA点击查看教程springboot统一配置点击查看教程工程NOSQLNOSQL示例不需要任何配置可以直接访问测试创建数据表选择对应的数据表脚本这里以SQL为例修改数据库连接信息访问页面进行测试文件存储路径up6/upload/年/月/日/guid/filename效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例