江门网站推广多少钱网站如何发布和推广

江门网站推广多少钱,网站如何发布和推广,企业网站建设可以分为几个层次,网站建设后台管理流程提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录一、大文件上传的核心问题二、解决方案#xff1a;分片上传2.1 核心定义2.2 核心优势三、分片上传核心原理3.1 整体流程3.2 关键#xff1a;文件读取与分片3.2.1 读…提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档文章目录一、大文件上传的核心问题二、解决方案分片上传2.1 核心定义2.2 核心优势三、分片上传核心原理3.1 整体流程3.2 关键文件读取与分片3.2.1 读取本地文件3.2.2 文件分片实现3.2.3 分片特点四、核心文件唯一标识Hash计算4.1 为什么需要Hash值4.2 Hash计算方案4.2.1 安装依赖4.2.2 实现Hash计算4.2.3上传分片4.3 秒传功能原理五、断点续传核心逻辑六、总结一、大文件上传的核心问题当上传视频等大文件时直接单次上传会面临诸多问题这也是B站等平台采用分片上传的核心原因上传耗时极长大文件数据量庞大单次请求传输链路长等待时间久失败代价高网络中断、服务器异常等问题会导致上传失败需重新完整上传服务端限制多数服务器会对单次上传文件大小设限直接上传易触发限制用户体验差无进度反馈、失败后重复操作严重影响使用感受。二、解决方案分片上传2.1 核心定义将大文件切割为多个大小均等的数据小块分片逐个或并行上传至服务器全部分片上传完成后由后端按顺序组装还原为完整文件的技术方案。2.2 核心优势降低失败风险仅需重新上传出错的分片无需重复传输完整文件提升上传效率支持多分片并行上传突破单文件传输瓶颈适配服务端限制单个分片大小可控避免触发服务端文件大小限制支持断点续传结合状态记录可在网络恢复后继续上传未完成部分。三、分片上传核心原理3.1 整体流程前端读取本地文件获取File对象按固定大小切割File对象生成多个分片Blob类型计算文件唯一标识hash值用于服务端识别文件逐个/并行上传分片携带文件标识、分片序号等信息服务端接收分片并存储记录分片顺序与位置所有分片上传完成后前端通知后端触发文件组装后端按分片顺序拼接还原为完整文件。3.2 关键文件读取与分片3.2.1 读取本地文件通过监听input标签的change事件在回调中获取用户选择的File对象FileList伪数组形式需通过下标获取单个文件。template!--文件选择输入框--input changehandleUploadtypefile//div/templatescript setup langts/** * 处理文件选择事件 * param e 事件对象 */consthandleUpload(e:Event){// 类型断言将事件目标转为HTMLInputElementconstinpute.targetasHTMLInputElement;// 获取文件列表伪数组支持下标访问constfilesinput.files;if(!files||files.length0)return;// 获取第一个选中的文件File对象继承自Blobconstfilefiles[0];console.log(选中文件信息,{name:file.name,// 文件名size:file.size,// 文件大小字节type:file.type// 文件MIME类型});};/script3.2.2 文件分片实现核心依赖Blob.slice()方法File对象继承自Blob可直接调用该方法切割文件。通过循环控制切割的起始与结束位置生成多个固定大小的分片。关键参数CHUNK_SIZE分片大小通常设为1-5MB此处以1MB为例// 分片大小1MB1024*1024字节constCHUNK_SIZE1024*1024;/** * 切割文件为多个分片 * param file 待分片的File对象 * returns 分片数组每一项为Blob类型 */constcreateChunks(file:File):Blob[]{constchunks:Blob[][];letcurrentPosition0;// 当前切割位置// 循环切割直到覆盖整个文件while(currentPositionfile.size){/** * slice(start, end)切割Blob * start起始字节位置 * end结束字节位置不包含 */constchunkfile.slice(currentPosition,currentPositionCHUNK_SIZE);chunks.push(chunk);// 更新下一次切割的起始位置currentPositionCHUNK_SIZE;}console.log(文件分片完成共${chunks.length}个分片);returnchunks;};// 调用示例在handleUpload中添加// const file files[0];// const chunks createChunks(file);3.2.3 分片特点分片过程几乎瞬间完成原因是Blob/File对象仅存储文件元信息名称、大小等不存储实际文件数据slice()方法仅生成新的元信息引用未复制数据。四、核心文件唯一标识Hash计算4.1 为什么需要Hash值服务端需通过唯一标识区分不同文件避免以下问题文件名重复不同文件可能重名相同文件可能改名实现秒传相同内容的文件仅需上传一次断点续传通过Hash值匹配已上传的分片。4.2 Hash计算方案采用spark-md5库轻量、高效支持浏览器端基于文件内容生成唯一MD5 Hash值。为优化大文件计算效率采用「抽样计算」策略第一个和最后一个分片完整参与计算中间分片仅抽取头部2字节、中间2字节、尾部2字节参与计算兼顾唯一性与性能避免全量计算耗时过长。4.2.1 安装依赖# npm安装npminstallspark-md5 --save# yarn安装yarnaddspark-md5# pnpm安装pnpmaddspark-md54.2.2 实现Hash计算importSparkMD5fromspark-md5;/** * 计算文件的唯一Hash值基于内容 * param chunks 文件分片数组 * returns 文件Hash值Promise */constcalculateFileHash(chunks:Blob[]):Promisestring{returnnewPromise((resolve,reject){constsparknewSparkMD5.ArrayBuffer();// 基于ArrayBuffer计算constfileReadernewFileReader();// 用于读取分片数据constsampleChunks:Blob[][];// 用于抽样的分片数据// 1. 抽样策略选取部分数据参与计算chunks.forEach((chunk,index){constisFirstChunkindex0;constisLastChunkindexchunks.length-1;if(isFirstChunk||isLastChunk){// 首/尾分片完整加入抽样sampleChunks.push(chunk);}else{// 中间分片抽取头部2B、中间2B、尾部2BsampleChunks.push(chunk.slice(0,2));sampleChunks.push(chunk.slice(CHUNK_SIZE/2,CHUNK_SIZE/22));sampleChunks.push(chunk.slice(CHUNK_SIZE-2,CHUNK_SIZE));}});// 2. 读取抽样数据fileReader.readAsArrayBuffer(newBlob(sampleChunks));// 3. 读取完成后计算HashfileReader.onload(e){try{constarrayBuffere.target?.resultasArrayBuffer;spark.append(arrayBuffer);// 追加数据constfileHashspark.end();// 生成最终Hash值console.log(文件唯一Hash值,fileHash);resolve(fileHash);}catch(error){reject(Hash计算失败error);}};// 4. 读取失败处理fileReader.onerror(error){reject(文件读取失败error);};});};// 调用示例在handleUpload中添加// const chunks createChunks(file);// const fileHash await calculateFileHash(chunks);4.2.3上传分片constuploadChunksasync(chunks:Blob[]){constdatachunks.map((chunk,index){return{fileHash:fileHash.value,chunkHash:fileHash.value-index,chunk,};});constformDatasdata.map((item){constformDatanewFormData();formData.append(fileHash,item.fileHash);formData.append(chunkHash,item.chunkHash);formData.append(chunk,item.chunk);returnformData;});// console.log(formDatas)constmax6;letindex0;consttaskPool:any[];//请求池while(indexformDatas.length){consttaskfetch(/upload,{method:POST,body:formDatas[index],});taskPool.splice(taskPool.findIndex((item:any)itemtask))taskPool.push(task)if(taskPool.lengthmax){awaitPromise.race(taskPool);//taskPool里如果有一个已完成那么这个Promise状态就会标志城已完成}index;}awaitPromise.all(taskPool);//方志友请求未完成};4.3 秒传功能原理用户上传文件前前端先计算文件Hash值并传给服务端服务端查询该Hash值是否已存在对应已上传的完整文件若存在直接返回“上传成功”无需传输文件秒传效果若不存在正常执行分片上传流程。五、断点续传核心逻辑基于文件Hash值实现核心是“上传前校验已传分片”前端计算文件Hash后向服务端发起“查询已传分片”请求服务端返回该文件已上传的分片序号列表如[0,1,2,5]前端过滤掉已上传的分片仅上传未完成的分片所有分片上传完成后请求服务端组装文件。六、总结前端核心职责文件读取 → 分片切割 → Hash计算 → 分片上传 → 触发组装后端核心职责接收分片 → 存储分片 → 校验已传分片 → 组装完整文件关键技术Blob.slice()分片、spark-md5 Hash计算、FormData传输分片