没有固定ip做网站网站模板 哪个好

没有固定ip做网站,网站模板 哪个好,大学网站 作风建设专题,室内家装设计大文件传输功能技术方案调研与自研规划 作为上海OA软件公司前端工程师#xff0c;针对公司OA系统50G级大文件传输需求#xff0c;我进行了深入的技术调研与分析。结合公司现有技术栈和业务需求#xff0c;现提出以下技术方案。 一、需求分析总结 核心功能#xff1a; 支持…大文件传输功能技术方案调研与自研规划作为上海OA软件公司前端工程师针对公司OA系统50G级大文件传输需求我进行了深入的技术调研与分析。结合公司现有技术栈和业务需求现提出以下技术方案。一、需求分析总结核心功能支持50G大文件上传/下载完整文件夹上传保留层级结构可靠断点续传跨浏览器会话进度持久化刷新/关闭浏览器不丢失兼容性要求操作系统Windows/macOS浏览器IE11/Firefox/Chrome/360安全浏览器数据库MySQL可扩展SQL Server/Oracle部署要求私有化部署内网环境源代码采购避免单套授权成本二、技术选型与架构设计前端架构Vue3// 文件分片上传核心逻辑示例Vue3 Composition APIimport{ref,onMounted}fromvueimportSparkMD5fromspark-md5exportfunctionuseFileUploader(options){const{apiUrl,chunkSize5*1024*1024}optionsconstprogressref(0)constfileInforef(null)// 从本地存储恢复上传状态constrestoreUploadState(fileId){constsavedStatelocalStorage.getItem(upload_${fileId})returnsavedState?JSON.parse(savedState):null}// 计算文件MD5用于唯一标识constcalculateFileMD5(file){returnnewPromise((resolve){constchunkSize5*1024*1024constchunksMath.ceil(file.size/chunkSize)constsparknewSparkMD5.ArrayBuffer()constfileReadernewFileReader()letcurrentChunk0fileReader.onload(e){spark.append(e.target.result)currentChunkif(currentChunkchunks){loadNextChunk()}else{resolve(spark.end())}}constloadNextChunk(){conststartcurrentChunk*chunkSizeconstendMath.min(startchunkSize,file.size)fileReader.readAsArrayBuffer(file.slice(start,end))}loadNextChunk()})}// 分片上传主逻辑constuploadFileasync(file){try{// 恢复或初始化上传状态constfileIdawaitcalculateFileMD5(file)letuploadStaterestoreUploadState(fileId)||{fileId,fileName:file.name,fileSize:file.size,uploadedSize:0,chunks:Math.ceil(file.size/chunkSize),uploadedChunks:0}// 如果已上传过部分文件跳过已上传分片conststartByteuploadState.uploadedSizeconstendByteMath.min(startBytechunkSize,file.size)constchunkfile.slice(startByte,endByte)constformDatanewFormData()formData.append(file,chunk)formData.append(fileId,fileId)formData.append(chunkIndex,uploadState.uploadedChunks)formData.append(totalChunks,uploadState.chunks)formData.append(fileName,file.name)formData.append(relativePath,uploadState.relativePath||)// 用于文件夹结构constresponseawaitfetch(apiUrl,{method:POST,body:formData})if(response.ok){uploadState.uploadedSizeendByte uploadState.uploadedChunksprogress.valueMath.min(100,(uploadState.uploadedSize/file.size)*100)// 保存上传状态到本地存储localStorage.setItem(upload_${fileId},JSON.stringify(uploadState))// 如果上传完成清理状态if(uploadState.uploadedSizefile.size){localStorage.removeItem(upload_${fileId})fileInfo.value{...uploadState,completed:true}}}}catch(error){console.error(Upload error:,error)throwerror}}return{progress,fileInfo,uploadFile}}后端架构SpringBoot核心模块文件分片接收服务断点续传状态管理文件合并服务文件夹结构解析服务数据库设计CREATETABLEfile_upload_task(idBIGINTPRIMARYKEYAUTO_INCREMENT,file_idVARCHAR(64)NOTNULLCOMMENT文件唯一标识,file_nameVARCHAR(255)NOTNULL,relative_pathVARCHAR(512)COMMENT文件夹相对路径,total_sizeBIGINTNOTNULL,uploaded_sizeBIGINTNOTNULLDEFAULT0,chunk_countINTNOTNULL,uploaded_chunksINTNOTNULLDEFAULT0,statusTINYINTNOTNULLDEFAULT0COMMENT0:上传中 1:已完成 2:已取消,create_timeDATETIMENOTNULL,update_timeDATETIMENOTNULL,INDEXidx_file_id(file_id));-- 可扩展支持多数据库的JPA实体示例EntityTable(namefile_upload_task)Inheritance(strategyInheritanceType.SINGLE_TABLE)DiscriminatorColumn(namedb_type,discriminatorTypeDiscriminatorType.STRING)publicabstract class FileUploadTask {IdGeneratedValue(strategyGenerationType.IDENTITY)private Long id;Column(nullablefalse,length64)private String fileId;// 其他字段...// 数据库类型抽象方法由子类实现具体逻辑publicabstract DatabaseType getDatabaseType();}// MySQL实现EntityDiscriminatorValue(MYSQL)publicclass MySQLFileUploadTask extends FileUploadTask {OverridepublicDatabaseType getDatabaseType(){returnDatabaseType.MYSQL;} }三、关键技术实现方案1. 跨会话断点续传实现前端方案使用localStorage持久化上传进度IE11兼容文件唯一标识采用MD5计算兼容所有浏览器上传状态包含文件唯一ID已上传字节数分片索引信息文件夹层级信息后端方案数据库记录上传任务状态提供状态查询API支持从指定字节续传2. 文件夹结构处理前端实现// 递归处理文件夹结构constprocessFolder(entry,relativePath){returnnewPromise((resolve){if(entry.isFile){entry.file(file{resolve([{file,relativePath}])})}elseif(entry.isDirectory){constdirReaderentry.createReader()dirReader.readEntries(entries{constpromises[]entries.forEach(subEntry{promises.push(processFolder(subEntry,${relativePath}${entry.name}/))})Promise.all(promises).then(results{resolve(results.flat())})})}})}// 使用示例结合HTML5 File System Access APIconsthandleDropasync(event){constitemsevent.dataTransfer.itemsfor(leti0;iitems.length;i){constentryitems[i].webkitGetAsEntry?items[i].webkitGetAsEntry():nullif(entry){constfilesawaitprocessFolder(entry)files.forEach(fileItem{uploadFile(fileItem.file,fileItem.relativePath)})}}}3. 兼容性处理方案IE11支持使用FileReaderpolyfill避免使用ES6语法通过Babel转译使用fetchpolyfill或回退到XMLHttpRequest360浏览器处理检测浏览器模式极速/兼容根据模式调整上传策略大文件处理优化动态调整分片大小根据网络状况并行上传分片限制并发数心跳机制保持连接四、自研方案优势完全可控性源代码完全掌握可根据业务需求深度定制长期维护有保障成本效益一次性采购成本低于多年授权费用可复用到多个项目避免开源组件的技术债务技术适配性完美集成现有Vue3SpringBoot架构数据库层抽象设计支持多数据库与OA业务流程无缝对接五、实施计划第一阶段2周完成核心分片上传/下载功能实现基本的断点续传完成MySQL存储实现第二阶段2周文件夹结构支持跨会话状态持久化多浏览器兼容性优化第三阶段1周数据库抽象层实现性能优化与压力测试集成到现有OA系统六、风险评估与应对IE11兼容性风险应对建立专门的兼容性测试环境准备polyfill回退方案大文件传输稳定性风险应对实现完善的错误重试机制添加传输校验机制MD5校验性能瓶颈风险应对实现动态分片大小调整添加并发控制机制七、结论基于公司现有技术栈和业务需求自研大文件传输组件是最佳选择。该方案既能满足当前50G级文件传输需求又能与公司OA系统深度集成同时通过源代码采购模式实现长期可控的成本效益。建议尽快启动研发工作优先实现核心功能再逐步完善兼容性和扩展性。导入项目导入到Eclipse点南查看教程导入到IDEA点击查看教程springboot统一配置点击查看教程工程NOSQLNOSQL示例不需要任何配置可以直接访问测试创建数据表选择对应的数据表脚本这里以SQL为例修改数据库连接信息访问页面进行测试文件存储路径up6/upload/年/月/日/guid/filename效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例