手机如何创建个人网站如何上传图片到网站

手机如何创建个人网站,如何上传图片到网站,带着做计算机项目的网站,宁德市建设局网站咱上海.NET程序员实锤了#xff01;最近接了个外包活#xff0c;客户是做企业资料管理的#xff0c;非要搞个大文件上传下载功能——要求20G文件随便传#xff0c;文件夹保留层级#xff08;比如/部门/2024项目/设计稿/初稿.psd这种#xff09;#xff0c;还要兼容IE8最近接了个外包活客户是做企业资料管理的非要搞个大文件上传下载功能——要求20G文件随便传文件夹保留层级比如/部门/2024项目/设计稿/初稿.psd这种还要兼容IE8客户那帮老机器还在Win7IE8上跑删不得碰不得。网上翻了一圈代码不是只有文件上传就是文件夹层级丢了要么断点续传一重启就废……今天必须把这需求啃下来顺便给兄弟们交个底需求拆解我要的到底是个啥简单说就仨核心大文件文件夹20G文件分片传文件夹保留层级1000个子文件也不乱。兼容老古董IE8用Flash其他浏览器用H5Win7IE9也能跑。加密断点传输用AES/SM4存储加密断点进度存本地关浏览器也不丢。下载不打包几万个文件批量下别让用户等压缩包解压直接流式下。前端Vue3 WebUploader兼容IE8的救命稻草IE8不支持H5的File API只能靠Flash补全。WebUploader是百度开源的支持Flash/H5双模式正好适配老浏览器。前端核心逻辑分片上传、断点查询、文件夹遍历、加密预处理。1. 前端关键代码Vue3组件import SparkMD5 from spark-md5; // 计算文件MD5断点续传关键 import WebUploader from webuploader; // 引入WebUploader库 import CryptoJS from crypto-js; // AES加密库传输加密 export default { data() { return { uploader: null, // WebUploader实例 progress: 0, // 上传进度百分比 isUploading: false, // 是否正在上传 currentFile: null, // 当前处理的文件 fileMd5: , // 当前文件的MD5唯一标识用于断点 chunkSize: 2 * 1024 * 1024, // 分片大小2MB20G分10000片 uploadedChunks: [], // 已上传的分片序号从本地localStorage读 encryptKey: user-defined-sm4-key-123 // 加密密钥实际项目要让用户输入 }; }, mounted() { this.initUploader(); // 初始化上传组件 }, methods: { // 清空队列 clearQueue() { this.uploader.clearQueue(); this.progress 0; this.currentFile null; this.uploadedChunks []; } } };后端ASP.NET C# WebForm兼容老技术的救星客户要求用ASP.NET WebForm虽然新项目很少用但老系统维护方便。后端核心逻辑接收分片、记录进度、合并文件、加密存储。1. 数据库设计SQL Server需要两张表FileRecord文件元信息和FileChunk分片记录。-- 文件元信息表CREATETABLEdbo.FileRecord(Id UNIQUEIDENTIFIERPRIMARYKEYDEFAULTNEWID(),-- 主键FileName NVARCHAR(255)NOTNULL,-- 文件名含路径如部门/2024项目/数据.xlsxFilePath NVARCHAR(500)NOTNULL,-- 服务器存储路径如E:/uploads/FileSizeBIGINTNOTNULL,-- 文件大小字节Md5 NVARCHAR(32)NOTNULL,-- 文件MD5唯一标识EncryptKey NVARCHAR(255)NOTNULL,-- 加密密钥AES密钥CreateTimeDATETIMEDEFAULTGETDATE()-- 创建时间);-- 文件分片记录表CREATETABLEdbo.FileChunk(Id UNIQUEIDENTIFIERPRIMARYKEYDEFAULTNEWID(),FileMd5 NVARCHAR(32)NOTNULL,-- 关联FileRecord.Md5ChunkNumberINTNOTNULL,-- 分片序号0开始ChunkPath NVARCHAR(500)NOTNULL,-- 分片临时存储路径IsUploadedBITDEFAULT0,-- 是否已上传0未上传1已上传CreateTimeDATETIMEDEFAULTGETDATE(),UNIQUENONCLUSTERED(FileMd5,ChunkNumber)-- 防止重复分片);2. 后端关键接口ASP.NET WebForm// UploadHandler.ashx处理分片上传publicclassUploadHandler:IHttpHandler,IRequiresSessionState{privatestring_uploadDirHttpContext.Current.Server.MapPath(~/Uploads/Temp/);// 临时分片存储路径privatestring_encryptKeyuser-defined-sm4-key-123;// 实际从请求参数获取publicvoidProcessRequest(HttpContextcontext){context.Response.ContentTypeapplication/json;stringactioncontext.Request[action];switch(action){caseinit:// 初始化上传生成MD5并查询已上传分片InitUpload(context);break;casechunk:// 接收分片上传UploadChunk(context);break;casemerge:// 合并分片MergeChunks(context);break;default:context.Response.Write(JsonConvert.SerializeObject(new{code400,msg无效操作}));break;}}// AES加密工具方法与前端对应privatebyte[]AesEncrypt(byte[]data,intoffset,intlength,stringkey){using(AesaesAes.Create()){aes.KeyEncoding.UTF8.GetBytes(key);aes.ModeCipherMode.ECB;aes.PaddingPaddingMode.PKCS7;ICryptoTransformencryptoraes.CreateEncryptor(aes.Key,aes.IV);returnencryptor.TransformFinalBlock(data,offset,length);}}// AES解密工具方法与前端对应privatebyte[]AesDecrypt(byte[]data,stringkey){using(AesaesAes.Create()){aes.KeyEncoding.UTF8.GetBytes(key);aes.ModeCipherMode.ECB;aes.PaddingPaddingMode.PKCS7;ICryptoTransformdecryptoraes.CreateDecryptor(aes.Key,aes.IV);returndecryptor.TransformFinalBlock(data,0,data.Length);}}publicboolIsReusablefalse;}3. 下载功能非打包方式用户要下载几万个文件直接打包会炸内存。用FileStreamResult流式输出逐个读取文件并写入响应流。// DownloadHandler.ashx处理文件夹下载publicclassDownloadHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){stringfolderPathcontext.Request[folderPath];// 前端传的文件夹路径如/部门/2024项目/stringserverPathHttpContext.Current.Server.MapPath($~/Uploads/{folderPath});if(!Directory.Exists(serverPath)){context.Response.StatusCode404;context.Response.End();return;}// 获取文件夹下所有文件递归遍历子目录varfilesDirectory.GetFiles(serverPath,*.*,SearchOption.AllDirectories);context.Response.ContentTypeapplication/octet-stream;context.Response.Headers.Add(Content-Disposition,$attachment; filename{HttpUtility.UrlEncode(folderPath)});foreach(varfileinfiles){stringrelativePathPath.GetRelativePath(serverPath,file);context.Response.Headers.Add($Content-Disposition: file; filename{HttpUtility.UrlEncode(relativePath)});byte[]bufferFile.ReadAllBytes(file);context.Response.OutputStream.Write(buffer,0,buffer.Length);context.Response.Flush();}context.Response.End();}publicboolIsReusablefalse;}兼容性兜底方案IE8/IE9Flash上传WebUploader的Flash模式在IE8必须需确保Uploader.swf路径正确且浏览器允许Flash运行学校机房可能需要调整安全设置。分片大小IE8对分片支持一般建议分片大小设为2MB太小会增加请求次数太大容易超时。文件夹上传IE9支持webkitdirectory属性WebUploader自动处理IE8只能手动让用户输入文件夹路径比如在文件名前加部门/2024项目/前缀后端按路径创建目录。部署说明小白必看环境准备安装IISWindows服务器启用ASP.NET WebForm支持。安装SQL Server创建数据库并执行提供的SQL脚本。下载WebUploader的Uploader.swf放在/static/webuploader/目录下。配置修改后端UploadHandler.ashx和DownloadHandler.ashx的路径添加到IIS的“处理程序映射”中。修改_uploadDir和_encryptKey为实际值密钥建议让用户输入别硬编码。测试步骤用Win7虚拟机装IE8测试文件夹上传上传到50%时关闭浏览器重新打开继续传。用Chrome测试大文件下载选几万个小文件看是否流式下载不卡顿。求救群里喊一嗓子现在代码框架搭好了但有几个坑还没填IE8下Flash上传的跨域问题需在IIS根目录放crossdomain.xml。20G文件合并时的内存溢出可能需要分块读取写入。加密密钥的安全存储用户忘记密钥怎么办需要设计密钥找回功能。群里加了个374992201新人有红包求大神来群里指导或者直接甩个DEMO链接外包答辩就靠这个了要是能上线说不定还能接点私活群里说推荐项目提20%提成10万项目提2万比打工香多了PS客户说“能跑起来就行”但我想做得更完美——毕竟这是吃饭的本事冲就完事了设置框架安装.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创建数据库配置数据库连接信息检查数据库配置访问页面进行测试相关参考文件保存位置效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载完整示例下载完整示例