电脑网站和手机网站的区别公司制作网站需要

电脑网站和手机网站的区别,公司制作网站需要,泉州全网营销推广,标准网站建设哪家好咱是一名福建的“老码农”#xff0c;最近接了个外包项目#xff0c;客户要做大文件上传功能#xff0c;要求还挺细——原生JS实现、20G文件传输、文件夹保留层级、加密传输存储、断点续传兼容IE9… 预算还卡在100块以内#xff08;老板说“小项目不搞虚的”#xff09;。…咱是一名福建的“老码农”最近接了个外包项目客户要做大文件上传功能要求还挺细——原生JS实现、20G文件传输、文件夹保留层级、加密传输存储、断点续传兼容IE9… 预算还卡在100块以内老板说“小项目不搞虚的”。咱一边啃着泡面一边想“这活得整明白不然别说接单了客户都得跑”先唠唠客户的“离谱”需求但必须满足大文件文件夹20G文件1000子文件的文件夹每天批量上传得稳得住。断点续传用户关浏览器、重启电脑都不丢进度咱就想这用户怕不是经常断电。加密传输用SM4/AES存储也加密客户说“数据安全比命重要”。兼容IE9部分用户还在Win7IE9咱叹气“这浏览器比我还老…”。非打包下载几万文件打包服务器直接崩客户“之前打包方案被骂惨了”。咱的“土味”解决方案能跑就行没找开源组件要么停更要么不支持咱自己整了个“原生JSSpringBoot”的组合拳——前端用原生File API分片后端用SpringBoot管分片数据库记进度加密用AESSM4类似换库就行。一、前端Vue3 原生JS兼容IE9代码尽量简单老码农看得懂新手能跑通import CryptoJS from crypto-js; // 加密用需npm install crypto-js export default { data() { return { uploading: false, progress: 0, chunkSize: 5 * 1024 * 1024, // 5MB分片20G分4000片 file: null, folderStructure: {}, // 记录文件夹层级 { path/to/file.txt: { size: 1024, chunks: [] } } uploadId: null, // 全局唯一ID断点续传标识 uploadedChunks: new Set() // 已上传分片 }; }, methods: { async handleFileSelect(e) { const files e.target.files; if (!files.length) return; this.file files[0]; // 生成全局唯一uploadId用时间戳随机数 this.uploadId upload_${Date.now()}_${Math.random().toString(36).slice(2, 8)}; // 遍历文件记录文件夹结构兼容IE9用iframe模拟 this.parseFolderStructure(files); // 检查后端已上传分片断点续传关键 await this.checkUploadedChunks(); // 开始上传 this.uploadAllChunks(); }, // 解析文件夹结构兼容IE9 parseFolderStructure(files) { Array.from(files).forEach(file { // IE9不支持webkitRelativePath用FileReader读路径土办法 const reader new FileReader(); reader.onload (e) { const path e.target.result.split(,)[1]; // 实际需用File API获取相对路径IE9用其他方法 this.folderStructure[path] { size: file.size, chunks: [], uploaded: false }; }; reader.readAsDataURL(file); }); }, // 检查已上传分片后端接口 async checkUploadedChunks() { const res await this.$http.get(/api/upload/check?uploadId${this.uploadId}); this.uploadedChunks new Set(res.data.uploadedChunks); // 计算初始进度 this.progress (this.uploadedChunks.size / this.totalChunks) * 100; }, // 上传所有分片控制并发防崩溃 async uploadAllChunks() { this.uploading true; const totalChunks Math.ceil(this.file.size / this.chunkSize); for (let i 0; i totalChunks; i) { if (this.uploadedChunks.has(i)) { this.progress (i / totalChunks) * 100; continue; } const start i * this.chunkSize; const end Math.min(start this.chunkSize, this.file.size); const chunk this.file.slice(start, end); // 加密分片AES密钥从后端获取 const encryptedChunk await this.encryptChunk(chunk); // 构造FormDataIE9用XHRiframe const formData new FormData(); formData.append(file, encryptedChunk, ${this.uploadId}_${i}); formData.append(chunkIndex, i); formData.append(totalChunks, totalChunks); formData.append(uploadId, this.uploadId); formData.append(filePath, this.filePath); // 文件夹路径 try { // 发送请求IE9用xhr const res await this.$http.post(/api/upload/chunk, formData); this.uploadedChunks.add(i); this.progress (i / totalChunks) * 100; } catch (err) { console.error(上传失败:, err); break; } } // 合并分片 if (this.uploadedChunks.size totalChunks) { await this.mergeChunks(); } this.uploading false; }, // 加密分片AES示例 async encryptChunk(chunk) { const key 客户提供的AES密钥16/256位; // 从后端获取更安全 const iv CryptoJS.lib.WordArray.random(16); // 随机IV const encrypted CryptoJS.AES.encrypt( CryptoJS.lib.WordArray.create(chunk), CryptoJS.enc.Utf8.parse(key), { iv: iv } ); return new Blob([iv.toString(), encrypted.toString()], { type: application/octet-stream }); }, // 合并分片触发后端合并 async mergeChunks() { const res await this.$http.post(/api/upload/merge, { uploadId: this.uploadId, fileName: this.file.name, totalChunks: this.totalChunks, filePath: this.filePath }); if (res.code 200) { alert(上传成功); } } } };二、后端SpringBoot分片管理加密存储代码简洁兼容老版本数据库记进度// FileUploadController.java处理上传接口RestControllerRequestMapping(/api/upload)publicclassFileUploadController{Value(${upload.temp.path})privateStringtempPath;// 临时分片存储路径如/data/tempValue(${upload.final.path})privateStringfinalPath;// 最终存储路径如/data/filesAutowiredprivateFileUploadMapperuploadMapper;// MyBatis Mapper操作MySQL// 检查已上传分片GetMapping(/check)publicMapcheckChunks(RequestParamStringuploadId){ListuploadedChunksuploadMapper.selectUploadedChunks(uploadId);MapresnewHashMap();res.put(uploadedChunks,uploadedChunks);returnres;}// 接收分片PostMapping(/chunk)publicMapuploadChunk(RequestParam(file)MultipartFilefile,RequestParamintchunkIndex,RequestParaminttotalChunks,RequestParamStringuploadId,RequestParamStringfilePath){// 创建临时目录StringtempDirtempPath/uploadId;FiledirnewFile(tempDir);if(!dir.exists())dir.mkdirs();// 保存分片加密存储后端解密后存StringchunkPathtempDir/chunkIndex;try{file.transferTo(newFile(chunkPath));}catch(IOExceptione){returnMap.of(code,500,msg,分片保存失败);}// 记录已上传分片到数据库uploadMapper.insertUploadProgress(uploadId,chunkIndex,filePath);returnMap.of(code,200);}// 合并分片PostMapping(/merge)publicMapmergeChunks(RequestParamStringuploadId,RequestParamStringfileName,RequestParaminttotalChunks,RequestParamStringfilePath){StringtempDirtempPath/uploadId;StringfinalFilePathfinalPath/filePath/fileName;// 合并分片解密后合并try(RandomAccessFilerafnewRandomAccessFile(finalFilePath,rw)){for(inti0;itotalChunks;i){StringchunkPathtempDir/i;byte[]chunkDataFiles.readAllBytes(Paths.get(chunkPath));byte[]decryptedDataaesDecrypt(chunkData);// AES解密raf.write(decryptedData);// 删除临时分片Files.delete(Paths.get(chunkPath));}}catch(IOExceptione){returnMap.of(code,500,msg,合并失败);}// 清理数据库记录uploadMapper.deleteUploadProgress(uploadId);returnMap.of(code,200,msg,合并成功);}// AES解密密钥从配置中心获取privatebyte[]aesDecrypt(byte[]data){Stringkey客户提供的AES密钥16/256位;// 实际从配置/数据库获取// 解密逻辑略用AES/CBC/PKCS5PaddingreturndecryptedData;}}// FileUploadMapper.javaMyBatis操作数据库publicinterfaceFileUploadMapper{Select(SELECT chunk_index FROM file_upload_progress WHERE upload_id #{uploadId})ListselectUploadedChunks(Param(uploadId)StringuploadId);Insert(INSERT INTO file_upload_progress (upload_id, chunk_index, file_path) VALUES (#{uploadId}, #{chunkIndex}, #{filePath}) ON DUPLICATE KEY UPDATE chunk_index #{chunkIndex})voidinsertUploadProgress(Param(uploadId)StringuploadId,Param(chunkIndex)intchunkIndex,Param(filePath)StringfilePath);Delete(DELETE FROM file_upload_progress WHERE upload_id #{uploadId})voiddeleteUploadProgress(Param(uploadId)StringuploadId);}三、数据库表结构MySQLCREATETABLEfile_upload_progress(idINTPRIMARYKEYAUTO_INCREMENT,upload_idVARCHAR(64)NOTNULLCOMMENT全局上传ID,chunk_indexINTNOTNULLCOMMENT分片序号,file_pathVARCHAR(255)NOTNULLCOMMENT文件/文件夹路径,UNIQUEKEYuk_upload_chunk(upload_id,chunk_index)-- 唯一索引防重复);咱的“保姆级”支持预算有限但服务到位代码完整提供前端Vue3组件含IE9兼容补丁、后端SpringBoot代码含MyBatis配置、数据库脚本解压就能跑。部署简单写了一键打包脚本npm run buildmvn packageTomcat直接扔WAR包MySQL导入SQL就行。加密支持AES密钥可配置客户自己保管SM4换库就能用附BouncyCastle集成文档。兼容兜底IE9用iframe模拟上传代码里标了注释现代浏览器用原生Fetch主流浏览器全支持。最后唠唠接单群资源分享咱建了个QQ群374992201专门拉“外包码农”和“找项目的老板”——群里福利拉满新人加群送1~99元红包手慢无推荐项目拿20%提成2万项目提4千比外卖自由香多了技术交流大文件上传、加密、兼容问题随便问老码农在线答疑内推工作福州IT圈岗位大厂外包都有。咱这项目要是成了答辩老师看了都得夸“这程序员有点东西” 赶紧加群一起搞钱一起秃一起当“外包大佬”PS群里还有人分享“如何用AI写文档”的玄学技巧亲测能过甲方审核导入项目导入到Eclipse点南查看教程导入到IDEA点击查看教程springboot统一配置点击查看教程工程NOSQLNOSQL示例不需要任何配置可以直接访问测试创建数据表选择对应的数据表脚本这里以SQL为例修改数据库连接信息访问页面进行测试文件存储路径up6/upload/年/月/日/guid/filename效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例