电子商务网站建设教学WordPress用户自定义头衔
电子商务网站建设教学,WordPress用户自定义头衔,学做美食饮品网站,wordpress换主题开发日记#xff1a;大文件上传系统攻坚记 日期#xff1a;2023年XX月XX日 天气#xff1a;晴#xff08;但心情像在调试IE8的阴天#xff09; 一、需求拆解#xff1a;从不可能到可能
客户的需求像一座高山#xff1a;
20G文件传输#xff…开发日记大文件上传系统攻坚记日期2023年XX月XX日天气晴但心情像在调试IE8的阴天一、需求拆解从不可能到可能客户的需求像一座高山20G文件传输阿里云OSS单文件上限5TB但浏览器内存是瓶颈IE8兼容默默掏出XDomainRequest和ActiveXObject的祖传代码文件夹层级保留需递归处理的FileSystemEntryAPI断点续传加密分片上传本地存储恢复点Web Crypto API技术选型放弃WebUploaderIE8支持不足选择原生JSH5 File API加密方案SM4/AES通过forge.js兼容旧浏览器断点续传localStorage服务端分片记录二、前端核心代码文件夹上传与断点续传1. 文件夹上传递归扫描// 获取文件夹所有文件兼容IE10IE8需ActiveX降级方案asyncfunctionscanDirectory(directory){constfiles[];conststack[directory];while(stack.length){constentrystack.pop();if(entry.isFile){files.push(awaitgetFile(entry));}elseif(entry.isDirectory){constreaderentry.createReader();constentriesawaitnewPromise(resolvereader.readEntries(resolve));stack.push(...entries);}}returnfiles;}// IE8降级方案需用户手动选择多个文件functionhandleIE8Fallback(){constinputdocument.createElement(input);input.typefile;input.multipletrue;input.onchange()uploadFiles(input.files);input.click();}2. 分片上传断点续传classChunkUploader{constructor(file,options){this.filefile;this.chunkSize5*1024*1024;// 5MB/chunkthis.totalChunksMath.ceil(file.size/this.chunkSize);this.uploadedChunksJSON.parse(localStorage.getItem(file.name)||[]);}asyncupload(){for(leti0;ithis.totalChunks;i){if(this.uploadedChunks.includes(i))continue;constchunkthis.file.slice(i*this.chunkSize,(i1)*this.chunkSize);awaitthis.sendChunk(chunk,i);this.uploadedChunks.push(i);localStorage.setItem(this.file.name,JSON.stringify(this.uploadedChunks));}}asyncsendChunk(chunk,index){constformDatanewFormData();formData.append(chunk,chunk);formData.append(chunkIndex,index);formData.append(totalChunks,this.totalChunks);formData.append(fileId,btoa(this.file.namethis.file.size));// 唯一标识returnfetch(/api/upload,{method:POST,body:formData});}}三、后端C#代码分片处理与加密存储1. 分片接收ASP.NET WebForm[WebMethod]publicstaticstringUploadChunk(){HttpPostedFilechunkHttpContext.Current.Request.Files[chunk];intindexint.Parse(HttpContext.Current.Request[chunkIndex]);stringfileIdHttpContext.Current.Request[fileId];// 存储分片到临时目录stringtempPathPath.Combine(Server.MapPath(~/App_Data/Temp),fileId);Directory.CreateDirectory(tempPath);chunk.SaveAs(Path.Combine(tempPath,index.ToString()));// 检查是否完成if(AllChunksReceived(tempPath,int.Parse(HttpContext.Current.Request[totalChunks]))){MergeFile(tempPath,fileId);}returnOK;}2. SM4加密存储使用BouncyCastle库publicstaticvoidEncryptToOSS(Streaminput,stringossKey){varenginenewSM4Engine();varkeyEncoding.UTF8.GetBytes(16-byte-secret-key);engine.Init(true,newKeyParameter(key));using(varossClientnewOssClient(endpoint,accessKeyId,accessKeySecret))using(varcryptoStreamnewCryptoStream(input,engine,CryptoStreamMode.Read)){ossClient.PutObject(bucketName,ossKey,cryptoStream);}}四、踩坑实录IE8的棺材板快压不住了解决方案对文件夹上传降级为多文件选择用swfUpload后备方案20G文件内存溢出优化采用FileReader的readAsArrayBuffer分段处理文件夹层级丢失关键上传时携带相对路径如/科研资料/2023/实验报告.pdf五、部署与协作阿里云OSS配置开启断点续传和跨域规则SQL Server设计CREATETABLEFileTransfers(FileIdVARCHAR(255)PRIMARYKEY,OriginalName NVARCHAR(255),OSSPathVARCHAR(255),ChunkCountINT,CompletedChunksVARCHAR(MAX)-- JSON格式存储已上传分片)接单群协作代码已上传至群文件QQ群374992201含完整文档明日计划测试CentOS下Mono运行ASP.NET的兼容性编写IE8的ActiveX加密模块仿佛回到2010年签名—— 一个在古董浏览器和现代需求间挣扎的开发者设置框架安装.NET Framework 4.7.2https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472框架选择4.7.2添加3rd引用编译项目NOSQLNOSQL无需任何配置可直接访问页面进行测试SQL使用IIS大文件上传测试推荐使用IIS以获取更高性能。使用IIS Express小文件上传测试可以使用IIS Express创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。批量下载支持文件批量下载下载续传文件下载支持离线保存进度信息刷新页面关闭页面重启系统均不会丢失进度信息。文件夹下载支持下载文件夹并保留层级结构不打包不占用服务器资源。下载示例下载完整示例