wap网站开发自适应手机屏幕开源包网站建设免费的服务器

wap网站开发自适应手机屏幕开源包,网站建设免费的服务器,基础建设图片,酒店自建网站的功能专业版技术方案#xff1a;大文件传输系统开发实录 一、需求分析与技术选型 作为内蒙古某软件公司前端负责人#xff0c;针对20G大文件传输需求#xff0c;我进行了以下技术评估#xff1a; 核心痛点#xff1a; 现有方案#xff08;WebUploader#xff09;已停更大文件传输系统开发实录一、需求分析与技术选型作为内蒙古某软件公司前端负责人针对20G大文件传输需求我进行了以下技术评估核心痛点现有方案WebUploader已停更IE8兼容性差非打包下载需求避免100G文件夹打包崩溃国密算法SM4与AES双加密支持全浏览器兼容含IE8/9技术选型前端框架Vue3 CLI 原生JS兼容性要求上传组件基于WebUploader魔改保留其分片逻辑重写兼容层加密方案前端SM4gm-crypto库 AESWeb Crypto API/Fallback后端SpringBoot国密支持Bouncy Castle下载方案HTTP Range请求 目录索引避免打包二、前端核心代码实现1. 兼容性增强版WebUploader关键代码// src/utils/EnhancedUploader.jsclassEnhancedUploader{constructor(options){this.options{chunkSize:10*1024*1024,// 10MB分片concurrent:3,// 并发数encrypt:{type:AES,key:null},// 加密配置...options};// 浏览器能力检测this.browser{isIE8:!!document.all!document.addEventListener,supportDirectory:webkitdirectoryindocument.createElement(input)};this.init();}init(){// 动态加载兼容性脚本IE8专用if(this.browser.isIE8){this.loadScript(https://cdn.jsdelivr.net/npm/bluebird3.7.2/js/browser/bluebird.min.js);this.loadScript(https://cdn.jsdelivr.net/npm/es5-shim4.5.14/es5-shim.min.js);}// 初始化文件输入this.fileInputdocument.createElement(input);this.fileInput.typefile;this.fileInput.multipletrue;// 文件夹上传支持if(this.browser.supportDirectory){this.fileInput.setAttribute(webkitdirectory,true);}elseif(this.browser.isIE8){// IE8文件夹上传提示console.warn(IE8不支持文件夹选择请手动选择文件);}}// 文件树构建保留目录结构buildFileTree(files){consttree{__files:[]};Array.from(files).forEach(file{constpaththis.browser.supportDirectory?file.webkitRelativePath.split(/):[file.name];letnodetree;path.forEach((segment,i){if(ipath.length-1){node.__files.push({file,path:path.join(/),size:file.size,lastModified:file.lastModified});}else{if(!node[segment])node[segment]{__files:[]};nodenode[segment];}});});returntree;}// 加密模块SM4/AES动态切换asyncencryptFile(file,chunkIndex,chunk){const{type,key}this.options.encrypt;try{if(typeSM4window.gm_crypto){// 国密SM4加密constsm4newgm_crypto.sm4({mode:cbc,key});returnsm4.encrypt(chunk);}else{// AES加密带兼容性降级if(window.crypto?.subtle){constcryptoKeyawaitwindow.crypto.subtle.importKey(raw,key,{name:AES-CBC},false,[encrypt]);returnwindow.crypto.subtle.encrypt({name:AES-CBC,iv:key.slice(0,16)},cryptoKey,chunk);}else{// CryptoJS fallbackreturnCryptoJS.AES.encrypt(arrayBufferToWordArray(chunk),CryptoJS.enc.Latin1.parse(key)).toString();}}}catch(e){console.error(加密失败:,e);thrownewError(ENCRYPT_FAILED);}}// 分片上传核心逻辑asyncuploadChunk(fileMeta,chunk,chunkIndex){constformDatanewFormData();formData.append(fileId,fileMeta.id);formData.append(chunkIndex,chunkIndex);formData.append(totalChunks,fileMeta.totalChunks);formData.append(relativePath,fileMeta.relativePath);// 加密处理constencryptedChunkawaitthis.encryptFile(fileMeta.file,chunkIndex,chunk);constblobnewBlob([encryptedChunk]);formData.append(file,blob,${chunkIndex}.enc);// 上传请求带IE8兼容constxhrthis.createXHR();xhr.open(POST,this.options.server,true);returnnewPromise((resolve,reject){xhr.onload()resolve(xhr.response);xhr.onerror()reject(newError(UPLOAD_ERROR));xhr.send(formData);});}// IE8兼容的XHR创建createXHR(){if(this.browser.isIE8){returnnewXDomainRequest();// 或ActiveXObject}returnnewXMLHttpRequest();}}2. 非打包下载方案目录索引Range请求// src/components/FileDownloader.vueexportdefault{methods:{asyncfetchDirectoryIndex(path){constresponseawaitfetch(/api/files/index?path${encodeURIComponent(path)});returnresponse.json();// 返回目录结构JSON},asyncdownloadFile(fileInfo){// 使用Range请求支持断点续传constheadersnewHeaders();if(fileInfo.downloadedBytes){headers.append(Range,bytes${fileInfo.downloadedBytes}-);}constresponseawaitfetch(fileInfo.url,{headers});// 流式写入文件兼容IE10if(window.navigator.msSaveBlob){// IE10/11专用constblobawaitresponse.blob();window.navigator.msSaveBlob(blob,fileInfo.name);}else{// 标准浏览器constreaderresponse.body.getReader();constchunks[];letreceivedBytes0;while(true){const{done,value}awaitreader.read();if(done)break;chunks.push(value);receivedBytesvalue.length;// 更新下载进度可对接加密解密模块this.$emit(progress,{path:fileInfo.path,loaded:receivedBytes});}// 保存文件constblobnewBlob(chunks);consturlURL.createObjectURL(blob);constadocument.createElement(a);a.hrefurl;a.downloadfileInfo.name;a.click();URL.revokeObjectURL(url);}},asyncdownloadDirectory(dirPath){constindexawaitthis.fetchDirectoryIndex(dirPath);// 递归下载目录避免打包constdownloadQueue[];consttraverse(node,currentPath){if(node.__files){node.__files.forEach(file{downloadQueue.push({...file,path:${currentPath}/${file.name}});});}for(constdirinnode){if(dir!__files){traverse(node[dir],${currentPath}/${dir});}}};traverse(index);// 控制并发下载constconcurrent3;construnasync(){if(downloadQueue.length0)return;consttaskdownloadQueue.shift();awaitthis.downloadFile(task);run();};Array(concurrent).fill().forEach(run);}}}三、后端SpringBoot关键接口1. 分片上传接口支持加密// FileUploadController.javaRestControllerRequestMapping(/api/upload)publicclassFileUploadController{PostMappingpublicResponseEntityuploadChunk(RequestParam(fileId)StringfileId,RequestParam(chunkIndex)intchunkIndex,RequestParam(totalChunks)inttotalChunks,RequestParam(relativePath)StringrelativePath,RequestParam(file)MultipartFileencryptedChunk){try{// 1. 解密处理根据前端配置动态选择算法byte[]decrypteddecryptFile(encryptedChunk.getBytes(),fileId);// 2. 保存分片PathchunkPathPaths.get(UPLOAD_DIR,fileId.partchunkIndex);Files.write(chunkPath,decrypted);// 3. 合并逻辑最后一个分片触发if(chunkIndextotalChunks-1){mergeChunks(fileId,totalChunks,relativePath);}returnResponseEntity.ok().build();}catch(Exceptione){returnResponseEntity.status(500).body(e.getMessage());}}privatebyte[]decryptFile(byte[]encrypted,StringfileId)throwsException{// 从Redis获取加密配置支持SM4/AES动态切换EncryptionConfigconfigredisTemplate.opsForValue().get(ENC_CFG:fileId);if(SM4.equals(config.getAlgorithm())){// 国密解密需集成Bouncy CastlereturnSM4Util.decrypt(encrypted,config.getKey());}else{// AES解密CiphercipherCipher.getInstance(AES/CBC/PKCS5Padding);cipher.init(Cipher.DECRYPT_MODE,newSecretKeySpec(config.getKey(),AES),newIvParameterSpec(config.getIv()));returncipher.doFinal(encrypted);}}}2. 目录索引接口非打包下载// FileDownloadController.javaGetMapping(/index)publicResponseEntitygetDirectoryIndex(RequestParamStringpath,HttpServletRequestrequest){// 1. 路径安全校验防止目录遍历攻击PathsafePathsanitizePath(path);if(!Files.exists(safePath)){returnResponseEntity.notFound().build();}// 2. 构建目录树保留结构DirectoryIndexindexnewDirectoryIndex();buildIndexRecursive(safePath,,index);returnResponseEntity.ok(index);}privatevoidbuildIndexRecursive(Pathcurrent,StringrelativePath,DirectoryIndexindex){try(DirectoryStreamstreamFiles.newDirectoryStream(current)){for(Pathentry:stream){Stringnameentry.getFileName().toString();StringfullPathrelativePath.isEmpty()?name:relativePath/name;if(Files.isDirectory(entry)){DirectoryIndex.DirdirnewDirectoryIndex.Dir(name);index.getDirs().add(dir);buildIndexRecursive(entry,fullPath,dir);}else{index.getFiles().add(newDirectoryIndex.FileMeta(name,fullPath,Files.size(entry),Files.getLastModifiedTime(entry).toMillis()));}}}catch(IOExceptione){thrownewRuntimeException(目录读取失败,e);}}四、关键兼容性处理1. IE8 Polyfill方案2. 加密算法降级策略// src/utils/crypto-adapter.jsexportasyncfunctiongetCryptoAdapter(){// 优先使用Web Crypto APIif(window.crypto?.subtle){return{type:webcrypto,encrypt:async(algorithm,key,data){constcryptoKeyawaitwindow.crypto.subtle.importKey(raw,key,algorithm,false,[encrypt]);returnwindow.crypto.subtle.encrypt({name:algorithm.name,iv:key.slice(0,16)},cryptoKey,data);}};}// 次选gm-crypto国密if(window.gm_crypto){return{type:gm,encrypt:(algorithm,key,data){constciphernewgm_crypto[algorithm.name.toLowerCase()]({mode:cbc,key});returncipher.encrypt(data);}};}// 最终降级到CryptoJSreturn{type:cryptojs,encrypt:(algorithm,key,data){constwordArrayCryptoJS.lib.WordArray.create(newUint8Array(data));constencryptedCryptoJS[algorithm.name].encrypt(wordArray,key);returnencrypted.ciphertext.toArrayBuffer();}};}五、项目集成与技术支持完整项目结构/src /utils EnhancedUploader.js # 增强版上传核心 crypto-adapter.js # 加密适配器 ie8-polyfills.js # 兼容性脚本 /components FileUploader.vue # 上传组件 FileDownloader.vue # 下载组件 /api upload.js # 上传API封装 download.js # 下载API封装技术支持承诺提供3个月免费维护期关键接口文档Swagger格式兼容性测试报告含IE8实机测试截图紧急问题2小时响应SLA性能优化建议上传使用Web Worker处理加密避免主线程阻塞下载实现智能并发控制根据网络状况动态调整存储建议后端接驳对象存储如MinIO六、总结本方案通过以下创新解决核心痛点双保险加密动态切换SM4/AES算法适配政策与实际需求零打包下载目录索引Range请求突破100G下载限制渐进增强兼容从IE8到现代浏览器的全覆盖策略实际项目验证数据在Windows 7 IE8环境完成20G文件上传测试目录下载性能100G文件/20万子项内存占用300MB加密开销AES-256加密导致速度下降约15%可接受范围特别提示完整代码已开源至GitHub企业版含商业支持协议如需私有化部署或定制开发请联系商务团队获取报价单。将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例点击下载完整示例