全屏展示网站图片如何做自适应企业营业执照查询

全屏展示网站图片如何做自适应,企业营业执照查询,教师兼职做网站,太原建站公司有哪些一、切片上传技术原理 切片上传是把大文件分割成多个较小的切片#xff0c;分别上传这些切片#xff0c;最后在服务器端将它们合并成完整文件。这种方式能有效应对网络不稳定导致的上传失败问题#xff0c;还可利用多线程并行上传#xff0c;提升上传效率。 二、前端实现…一、切片上传技术原理切片上传是把大文件分割成多个较小的切片分别上传这些切片最后在服务器端将它们合并成完整文件。这种方式能有效应对网络不稳定导致的上传失败问题还可利用多线程并行上传提升上传效率。二、前端实现步骤及与后端接口交互1 文件选择与信息获取用户通过文件选择框选择要上传的大文件。前端获取文件的基本信息包括文件名、文件大小、文件类型等。这些信息将在后续的上传过程中发挥重要作用例如文件名用于服务器端存储文件文件大小用于计算切片数量和监控上传进度。2 切片参数设定根据服务器的性能和网络状况合理确定切片的大小。一般来说切片大小可以设置为 1MB - 5MB 之间。较小的切片在网络不稳定时能更好地实现断点续传但会增加服务器合并的工作量较大的切片则反之。3 文件切片操作使用 JavaScript 的File.prototype.slice方法对文件进行切片。从文件的起始位置开始按照设定的切片大小依次截取文件片段直到文件末尾。每个切片都有其在原文件中的偏移量和唯一标识方便服务器识别和排序。4 切片信息生成为每个切片生成唯一的标识可采用 UUID 算法。同时记录切片的索引、总切片数量、文件的唯一标识等信息。这些信息将与切片数据一起发送到服务器用于服务器端的切片合并和文件完整性验证。5 预上传请求与后端接口 1预检查接口接口功能前端向后端发送预上传请求携带文件的基本信息文件名、文件大小、文件哈希值等。后端接收到请求后检查该文件是否已存在于服务器中。若存在则返回已上传的切片信息前端可以根据这些信息跳过已上传的切片直接上传未完成的部分若不存在则为此次上传创建记录并返回允许上传的标识前端可以开始上传所有切片。接口请求方式通常采用 POST 请求将文件信息以 JSON 格式或表单数据的形式发送到后端。接口返回数据若文件已存在返回已上传的切片索引列表。若文件不存在返回一个唯一的上传标识用于后续切片上传和合并操作的关联。6 切片上传请求与后端接口 2切片上传接口接口功能前端根据预上传请求的结果将未上传的切片逐个发送到后端。每个请求携带切片数据、切片信息索引、总切片数量、文件唯一标识等。后端接收到切片后将其存储到临时目录并记录切片的存储路径和相关信息。接口请求方式采用 POST 请求请求体为multipart/form-data格式包含切片文件和切片信息。接口返回数据返回上传成功的标识或状态码前端根据返回结果更新上传进度和状态。3.7 上传进度监控在切片上传过程中前端实时监控上传进度。可以通过监听请求的progress事件获取已上传的字节数和总字节数计算出上传进度百分比并将进度信息展示给用户。同时将上传进度信息存储在本地以便在上传中断后恢复时使用。3.8 断点续传处理若上传过程中出现网络中断或其他异常情况前端记录已上传的切片信息。重新上传时再次调用预上传接口获取未上传的切片列表继续上传未完成的切片实现断点续传功能。9 合并请求与后端接口 3切片合并接口接口功能当所有切片上传完成后前端向后端发送合并请求携带文件唯一标识和总切片数量。后端接收到请求后根据记录的切片信息按顺序将切片合并成完整文件并进行完整性验证。验证通过后将合并后的文件移动到指定存储位置并清理临时切片文件。接口请求方式采用 POST 请求将文件唯一标识和总切片数量以 JSON 格式或表单数据的形式发送到后端。接口返回数据返回合并成功的标识或状态码以及合并后文件的存储路径或访问链接。template div classbreak-point div classgva-table-box el-divider content-positionleft大文件上传/el-divider form idfromCont methodpost div classfileUpload clickinputChange 选择文件 input v-showfalse idfile refFileInput multiplemultiple typefile changechoseFile /div /form el-button :disabledlimitFileSize typeprimary sizesmall classuploadBtn clickgetFile上传文件/el-button div classel-upload__tip请上传不超过5MB的文件/div div classlist transition namelist tagp div v-iffile classlist-item el-icon document / /el-icon span{{ file.name }}/span span classpercentage{{ percentage }}%/span el-progress :show-textfalse :text-insidefalse :stroke-width2 :percentagepercentage / /div /transition /div div classtips此版本为先行体验功能测试版样式美化和性能优化正在进行中上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹/div /div /div /template script setup import SparkMD5 from spark-md5 import { findFile, breakpointContinueFinish, removeChunk, breakpointContinue } from /api/breakpoint import { ref, watch } from vue import { ElMessage } from element-plus import { ElLoading } from element-plus const file ref(null) // 读取的文件信息可以读取文件大小、同时生成MD5标识等等。 const fileMd5 ref() // Md5加密标识 const formDataList ref([]) // 分片存储的一个池子{ key: sliceIndex.value, formData } const waitUpLoad ref([]) // 当是断点续传剩下没有上传的切片 const waitNum ref(NaN) // 当是断点续传剩下没有上传的切片数量 const limitFileSize ref(false) const percentage ref(0) const percentageFlage ref(true) const FileSliceCap 10 * 1024 * 1024 // 分片字节数如果分的太细需要发送很多个分片请求。 const sliceStart ref(0) // 定义分片开始切的地方 const sliceEnd ref(0) // 每片结束切的地方a const sliceIndex ref(0) // 第几片 const allChunkSize ref(0) // 所有大切片的累加体积 const isCreateMd5 ref(true) // 是否生成Md5 const limitSize 2000 * 1024 * 1024 // 浏览器对于上传的文件有限定大小大于2G的文件无法上传。我们需要对大于2G的文件先切成大的chunk const ChunkSizeCap 2000 * 1024 * 1024 // 大的chunk容量 const maxSize 10000 * 1024 * 1024 // 限制上传的文件大小 let moreThan_2G false const init () { percentage.value 0 allChunkSize.value 0 sliceStart.value 0 sliceEnd.value 0 sliceIndex.value 0 moreThan_2G file.value.size limitSize isCreateMd5.value true } // 选中文件的函数。如果文件大于2G先进行一次切片。 const choseFile async(e) { const fileInput e.target.files[0] // 获取当前文件 file.value fileInput init() if (file.value.size maxSize) { if (moreThan_2G) { formDataList.value [] let chunkStart 0 let chunkEnd 0 let chunkIndex 0 while (chunkEnd file.value.size) { chunkStart chunkIndex * ChunkSizeCap // 计算每片开始位置 chunkEnd (chunkIndex 1) * ChunkSizeCap // 计算每片结束位置 const fileChunk file.value.slice(chunkStart, chunkEnd) sliceChunk(fileChunk) chunkIndex } } else { sliceChunk(file.value) } } else { limitFileSize.value true ElMessage(请上传小于5M文件) } } /** * 对文件进行切片同时根据文件信息生成md5md5用于后端识别文件。 * 切片信息包括 * -md5 * -当前切片文件 * -当前是第几片 * -文件名 * param fileChunk */ const sliceChunk (fileChunk) { const fileR new FileReader() // 创建一个reader用来读取文件流 percentage.value 0 fileR.readAsArrayBuffer(fileChunk) // 把文件读成ArrayBuffer 主要为了保持跟后端的流一致 const loading ElLoading.service({ lock: true, text: Loading, background: rgba(0, 0, 0, 0.7), }) fileR.onload async e { allChunkSize.value fileChunk.size if (isCreateMd5.value) { // 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中 const blob e.target.result const spark new SparkMD5.ArrayBuffer() // 创建md5制造工具 spark.append(blob) // 文件流丢进工具 fileMd5.value spark.end() // 工具结束 产生一个总文件的md5 isCreateMd5.value false } // 当结尾数字大于文件总size的时候 结束切片 while (sliceEnd.value file.value.size) { sliceStart.value sliceIndex.value * FileSliceCap // 计算每片开始位置 sliceEnd.value (sliceIndex.value 1) * FileSliceCap // 计算每片结束位置 var fileSlice fileChunk.slice(sliceStart.value, sliceEnd.value) // 开始切 file.slice 为 h5方法 对文件切片 参数为 起止字节数 const formData new window.FormData() // 创建FormData用于存储传给后端的信息 formData.append(fileMd5, fileMd5.value) // 存储总文件的Md5 让后端知道自己是谁的切片 formData.append(file, fileSlice) // 当前的切片 formData.append(chunkNumber, sliceIndex.value) // 当前是第几片 formData.append(fileName, file.value.name) // 当前文件的文件名 用于后端文件切片的命名 formData.appen 为 formData对象添加参数的方法 formDataList.value.push({ key: sliceIndex.value, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子 sliceIndex.value } if (allChunkSize.value file.value.size) { loading.close() submitSlice() } } fileR.onerror async e { loading.close() ElMessage(文件读取失败) } } /** * 提交给后端要上传的文件信息包括md5切片数量等等。 * 后端根据前端生成的md5与数据库文件的md5进行对比如果一致那么就表示上传完成实现了秒传功能。 * 如果数据库没有上传成功的文件那么后端会返回对应文件已经上传的切片数据。 * 前端formDataList和对应文件已经上传的切片数据进行对比判断还需要上传哪些切片从而实现断点上传。 * returns {Promisevoid} */ const submitSlice async() { const params { fileName: file.value.name, fileMd5: fileMd5.value, chunkTotal: formDataList.value.length } console.log(params) const res await findFile(params) // 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片 const finishList res.data.file.ExaFileChunk // 上传成功的切片 const IsFinish res.data.file.IsFinish // 是否是同文件不同命 文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能 if (!IsFinish) { // 当是断点续传时候 waitUpLoad.value formDataList.value.filter(all { return !(finishList finishList.some(fi fi.FileChunkNumber all.key) ) }) } else { waitUpLoad.value [] // 秒传则没有需要上传的切片 ElMessage.success(文件已秒传) } waitNum.value waitUpLoad.value.length // 记录长度用于百分比展示 } const getFile () { // 确定按钮 if (file.value null) { ElMessage(请先上传文件) return } if (percentage.value 100) { percentageFlage.value false } sliceFile() // 上传切片 } /** * 获取当前切片md5主要用于后端验证切片完整性 */ const sliceFile () { waitUpLoad.value waitUpLoad.value.forEach(item { // 需要上传的切片 item.formData.append(chunkTotal, formDataList.value.length) // 切片总数携带给后台 总有用的 const fileR new FileReader() // 功能同上 const fileF item.formData.get(file) fileR.readAsArrayBuffer(fileF) fileR.onload e { const spark new SparkMD5.ArrayBuffer() spark.append(e.target.result) item.formData.append(chunkMd5, spark.end()) upLoadFileSlice(item) } }) } watch(() waitNum.value, () { percentage.value Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100) }) /** * 上传切片信息有多少个切片就发送多少个请求因此切片大小和数量要根据实际情况去定。 * 切片上传完毕以后还要给后端再次发送一次请求让后端合成文件并删除缓存切片。 */ const upLoadFileSlice async(item) { // 切片上传 const fileRe await breakpointContinue(item.formData) if (fileRe.code ! 0) { return } waitNum.value-- // 百分数增加 if (waitNum.value 0) { // 切片传完以后 合成文件 const params { fileName: file.value.name, fileMd5: fileMd5.value } const res await breakpointContinueFinish(params) if (res.code 0) { // 合成文件过后 删除缓存切片 const params { fileName: file.value.name, fileMd5: fileMd5.value, filePath: res.data.filePath, } ElMessage.success(上传成功) await removeChunk(params) } } } const FileInput ref(null) const inputChange () { FileInput.value.dispatchEvent(new MouseEvent(click)) } /script script export default { name: BreakPoint } /script style langscss scoped h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } #fromCont { display: inline-block; } .fileUpload { padding: 3px 10px; font-size: 12px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #000; border: 1px solid #c1c1c1; border-radius: 4px; overflow: hidden; display: inline-block; input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; cursor: pointer; } } .fileName { display: inline-block; vertical-align: top; margin: 6px 15px 0 15px; } .uploadBtn { position: relative; top: -10px; margin-left: 15px; } .tips { margin-top: 30px; font-size: 14px; font-weight: 400; color: #606266; } .el-divider { margin: 0 0 30px 0; } .list { margin-top: 15px; } .list-item { display: block; margin-right: 10px; color: #606266; line-height: 25px; margin-bottom: 5px; width: 40%; .percentage { float: right; } } .list-enter-active, .list-leave-active { transition: all 1s; } .list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(-30px); } /styleimport request from /utils/request // 查找文件 export const findFile (params) { return request({ url: /fileUploadAndDownload/findFile, method: post, data: params }) } // 断点续传 export const breakpointContinue (data) { return request({ url: /fileUploadAndDownload/breakpointContinue, method: post, data: data }) } // 断点续传完成 export const breakpointContinueFinish (params) { return request({ url: /fileUploadAndDownload/breakpointContinueFinish, method: post, data: params }) } // 删除切片 export const removeChunk (params) { return request({ url: /fileUploadAndDownload/removeChunk, method: post, data: params }) }2025开年AI技术打得火热正在改变前端人的职业命运阿里云核心业务全部接入Agent体系字节跳动30%前端岗位要求大模型开发能力腾讯、京东、百度开放招聘技术岗80%与AI相关……大模型正在重构技术开发范式传统CRUD开发模式正在被AI原生应用取代最残忍的是业务面临转型领导要求用RAG优化知识库检索你不会带AI团队微调大模型要准备多少数据你不懂想转型大模型应用开发工程师等相关岗没项目实操经验……这不是技术焦虑而是职业生存危机曾经React、Vue等热门的开发框架已不再是就业的金钥匙。如果认为会调用API就是懂大模型、能进行二次开发那就大错特错了。制造、医疗、金融等各行业都在加速AI应用落地未来企业更看重能用AI大模型技术重构业务流的技术人。如今技术圈降薪裁员频频爆发传统岗位大批缩水相反AI相关技术岗疯狂扩招薪资逆势上涨150%大厂老板们甚至开出70-100W年薪挖掘AI大模型人才不出1年 “有AI项目开发经验”或将成为前端人投递简历的门槛。风口之下与其像“温水煮青蛙”一样坐等被行业淘汰不如先人一步掌握AI大模型原理应用技术项目实操经验“顺风”翻盘大模型目前在人工智能领域可以说正处于一种“炙手可热”的状态吸引了很多人的关注和兴趣也有很多新人小白想要学习入门大模型那么如何入门大模型呢下面给大家分享一份2025最新版的大模型学习路线帮助新人小白更系统、更快速的学习大模型2025最新版CSDN大礼包《AGI大模型学习资源包》免费分享**一、2025最新大模型学习路线一个明确的学习路线可以帮助新人了解从哪里开始按照什么顺序学习以及需要掌握哪些知识点。大模型领域涉及的知识点非常广泛没有明确的学习路线可能会导致新人感到迷茫不知道应该专注于哪些内容。我们把学习路线分成L1到L4四个阶段一步步带你从入门到进阶从理论到实战。L1级别:AI大模型时代的华丽登场L1阶段我们会去了解大模型的基础知识以及大模型在各个行业的应用和分析学习理解大模型的核心原理关键技术以及大模型应用场景通过理论原理结合多个项目实战从提示工程基础到提示工程进阶掌握Prompt提示工程。L2级别AI大模型RAG应用开发工程L2阶段是我们的AI大模型RAG应用开发工程我们会去学习RAG检索增强生成包括Naive RAG、Advanced-RAG以及RAG性能评估还有GraphRAG在内的多个RAG热门项目的分析。L3级别大模型Agent应用架构进阶实践L3阶段大模型Agent应用架构进阶实现我们会去学习LangChain、 LIamaIndex框架也会学习到AutoGPT、 MetaGPT等多Agent系统打造我们自己的Agent智能体同时还可以学习到包括Coze、Dify在内的可视化工具的使用。L4级别大模型微调与私有化部署L4阶段大模型的微调和私有化部署我们会更加深入的探讨Transformer架构学习大模型的微调技术利用DeepSpeed、Lamam Factory等工具快速进行模型微调并通过Ollama、vLLM等推理部署框架实现模型的快速部署。整个大模型学习路线L1主要是对大模型的理论基础、生态以及提示词他的一个学习掌握而L3 L4更多的是通过项目实战来掌握大模型的应用开发针对以上大模型的学习路线我们也整理了对应的学习视频教程和配套的学习资料。二、大模型经典PDF书籍书籍和学习文档资料是学习大模型过程中必不可少的我们精选了一系列深入探讨大模型技术的书籍和学习文档它们由领域内的顶尖专家撰写内容全面、深入、详尽为你学习大模型提供坚实的理论基础。书籍含电子版PDF三、大模型视频教程对于很多自学或者没有基础的同学来说书籍这些纯文字类的学习教材会觉得比较晦涩难以理解因此我们提供了丰富的大模型视频教程以动态、形象的方式展示技术概念帮助你更快、更轻松地掌握核心知识。四、大模型项目实战学以致用当你的理论知识积累到一定程度就需要通过项目实战在实际操作中检验和巩固你所学到的知识同时为你找工作和职业发展打下坚实的基础。五、大模型面试题面试不仅是技术的较量更需要充分的准备。在你已经掌握了大模型技术之后就需要开始准备面试我们将提供精心整理的大模型面试题库涵盖当前面试中可能遇到的各种技术问题让你在面试中游刃有余。因篇幅有限仅展示部分资料需要点击下方链接即可前往获取2025最新版CSDN大礼包《AGI大模型学习资源包》免费分享