阿卡不拉阿卡不拉
Vue3
阿卡的博客
Vue3
阿卡的博客
  • Vue3

    • 快速入门

      • 搭建工程 👌
      • 模板语法
      • 响应式基础
      • 响应式常用 API
      • 计算属性
      • 类与样式绑定
      • 条件和列表渲染
      • 事件处理
      • 表单处理
      • 生命周期
      • 侦听器
      • 组件介绍
      • Props
      • 自定义事件
      • 组件v-model
      • 插槽
      • 前端路由介绍
      • KeepAlive内置组件
      • 状态管理库
      • 组件库介绍
    • 深入本质

      • 虚拟DOM本质
      • 模板的本质
      • 组件树和虚拟DOM树
      • 数据拦截的本质
      • 响应式数据的本质
      • 响应式的本质
      • 响应式和组件渲染
      • 实现响应式系统 1
      • 实现响应式系统 2
      • 图解EFFECT
      • 实现响应式系统 3
      • 手写computed
      • 手写watch
      • 指令的本质
      • 插槽的本质
      • v-model的本质
      • setup 语法标签
      • 组件生命周期
      • keepalive 生命周期
      • keepalive的本质
      • key的本质
    • 细节补充

      • 【Vue】属性透传
      • 【Vue】依赖注入
      • 【Vue】组合式函数 👌
      • 【Vue】自定义指令
      • 【Vue】插件
      • 【Vue】Transition
      • 【Vue】TransitionGroup
      • 【Vue】Teleport
      • 【Vue】异步组件
      • 【Vue】Suspense
      • 【Router】路由模式
      • 【Router】路由零碎知识
      • 【Router】路由匹配语法
      • 【Router】路由组件传参
      • 【Router】内置组件和函数
      • 【Router】导航守卫
      • 【Router】过渡特效
      • 【Router】滚动行为
      • 【Router】动态路由
      • 【State】通信方式总结
      • 【State】Pinia 自定义插件
      • 【场景】封装树形组件
      • 【场景】自定义 ref 实现防抖
      • 【场景】懒加载
      • 【场景】虚拟列表
      • 【场景】虚拟列表优化
      • 【第三方库】VueUse
      • 【第三方库】vuedragable
      • 【第三方库】vue-drag-resize
      • 【第三方库】vue-chartjs
      • 【第三方库】vuelidate
      • 【第三方库】vue3-lazyload
      • 【场景】Websocket 聊天室
      • 【Vite】✨ 认识 Vite👌
      • 【Vite】配置文件 👌
      • 【Vite】✨ 依赖预构建 👌
      • 【Vite】构建生产版本 👌
      • 【Vite】环境变量与模式
      • 【Vite】CLI
      • 【Vite】Vite 插件
  • 笔面试

    • HTML

      • HTML 面试题汇总
      • 文档声明
      • 语义化
      • W3C 标准组织
      • SEO
      • iframe
      • 微格式
      • 替换元素
      • 页面可见性
    • CSS

      • CSS 面试题汇总
      • CSS 单位总结
      • 居中方式总结
      • 隐藏元素方式总结
      • 浮动
      • 定位总结
      • BFC
      • CSS 属性计算过程
      • CSS 层叠继承规则总结
      • @import 指令
      • CSS3 calc 函数
      • CSS3 媒体查询
      • 过渡和动画事件
      • 渐进增强和优雅降级
      • CSS3 变形
      • 渐进式渲染
      • CSS 渲染性能优化
      • 层叠上下文
      • CSS3 遮罩
    • JavaScript

      • JavaScript 面试题汇总
      • ✨ let、var、const 的区别
      • JS中的数据类型
      • 包装类型
      • 数据类型的转换
      • 运算符
      • ✨ 原型链
      • ✨ this 指向
      • ✨ 垃圾回收与内存泄漏
      • ✨ 执行栈和执行上下文
      • ✨ 作用域和作用域链
      • ✨ 闭包
      • DOM 事件的注册和移除
      • DOM 事件的传播机制
      • 阻止事件默认行为
      • 递归
      • ✨ 属性描述符
      • class 和构造函数区别
      • 浮点数精度问题
      • 严格模式
      • ✨ 函数防抖和节流
      • ✨ WeakSet 和 WeakMap
      • ✨ 深浅拷贝
      • 函数柯里化
      • Node 事件循环
      • 尺寸和位置
    • 浏览器

      • 浏览器面试题汇总
      • ✨ 浏览器的渲染流程
      • ✨ 资源提示关键词
      • 浏览器的组成部分
      • IndexedDB
      • ✨ File API
      • ✨ 浏览器缓存
      • ✨ 浏览器跨标签页通信
      • Web Worker
    • 网络

      • 网络面试题汇总
      • 五层网络模型 👌
      • 常见请求方法 👌
      • ✨cookie👌
      • 面试题
      • 加密
      • ✨JWT👌
      • ✨ 同源策略及跨域问题 👌
      • 文件上传
      • ✨ 输入 url 地址之后
      • 文件下载
      • ✨ session
      • ✨ TCP
      • ✨ CSRF 攻击
      • ✨XSS 攻击 👌
      • ✨ 网络性能优化
      • 断点续传
      • 域名和 DNS
      • SSL、TLS、HTTPS 的关系
      • ✨ HTTP 各版本差异 👌
      • HTTP 缓存协议
      • ✨ WebSocket
    • 工程化

      • CMJ 和 ESM
      • npx
      • ESLint
    • Vue2

      • Vue 面试题汇总相关
      • 组件通信方式总结
      • 虚拟 DOM
      • v-model
      • 数据响应式原理
      • diff
      • 生命周期详解
      • computed
      • 过滤器
      • 作用域插槽
      • 过度和动画
      • 优化
      • keep-alive
      • 长列表优化
      • 其他 API
      • 模式和环境变量
      • 更多配置
      • 更多命令
      • 嵌套路由
      • 路由切换动画
    • Vue3

      • ✨ Vue3 整体变化 👌
      • ✨ Vue3 响应式变化 👌
      • ✨ nextTick 实现原理 👌
      • 两道代码题 👌
      • Vue 运行机制
      • 渲染器核心功能
      • 事件绑定与更新

断点续传

下载

若要实现下载时的断点续传,首先,服务器在响应时,要在头中加入下面的字段

Accept-Ranges: bytes

这个字段是向客户端表明:我这个文件可以支持传输部分数据,你只需要告诉我你需要的是哪一部分的数据即可,单位是字节

此时,某些支持断点续传的客户端,比如迅雷,它就可以在请求时,告诉服务器需要的数据范围。具体做法是在请求头中加入下面的字段

range: bytes=0-5000

客户端告诉服务器:请给我传递 0-5000 字节范围内的数据即可,无须传输全部数据

完整流程如下

sequenceDiagram
客户端->>服务器: head请求,询问文件信息
服务器->>客户端: Content-Disposition,Accept-Ranges,Content-Length
客户端->>服务器: Range:bytes=0-500
服务器->>客户端: 0-500字节的数据
客户端->>服务器: Range:bytes=501-1000
服务器->>客户端: 501-1000字节的数据
客户端->>服务器: ...
服务器->>客户端: ...
客户端->>客户端: 将碎片信息组装成完整文件

其中 HEAD 请求没有响应体,只有相应头(没有响应体的 get 请求);接受到部分数据后会形成临时文件,如果传输中断,可以根据临时文件来继续发送后续的请求。

上传

整体来说,实现断点上传的主要思路就是把要上传的文件切分为多个小的数据块然后进行上传

虽然分片上传的整体思路一致,但它没有一个统一的、具体的标准,因此需要根据具体的业务场景制定自己的标准。

由于标准的不同,这也就意味着分片上传需要自行编写代码实现。

下面用一种极其简易的流程实现分片上传

sequenceDiagram
Note left of 客户端: 用户选择文件
Note left of 客户端: 将文件分割为多个分片
Note left of 客户端: 得到文件的MD5和每个分片的MD5
客户端->>服务器: 文件MD5、后缀、分片顺序、每个分片MD5
Note right of 服务器: 文件还剩哪些分片没有上传?
服务器->>客户端: 还需要上传的分片MD5
客户端->>服务器: 上传一个分片
Note right of 服务器: 文件还剩哪些分片没有上传?
服务器->>客户端: 还需要上传的分片MD5
客户端->>服务器: 上传一个分片
Note right of 服务器: 文件还剩哪些分片没有上传?
服务器->>客户端: 还需要上传的分片MD5
客户端->>服务器: 上传一个分片
Note right of 服务器: 所有分片已上传
Note right of 服务器: 合并所有分片成完整的文件
服务器->>客户端: 文件的访问地址

哈希编码是一种将任意长度的输入数据(比如文本、文件等)转换为固定长度的输出数据的算法或过程。这种输出数据通常被称为“哈希值”或“散列值”。哈希编码的主要特点是:即使输入数据只有微小的变化,输出的哈希值也会完全不同。 哈希编码的几个关键点:

  1. 单向性:哈希函数是不可逆的,也就是说,从哈希值无法反推出原始输入数据。
  2. 固定输出长度:无论输入数据有多长,输出的哈希值长度是固定的(如 MD5 总是生成 128 位的哈希值)。
  3. 抗碰撞性:理想的哈希函数应该保证不同的输入数据很少产生相同的哈希值(即“碰撞”)。
  4. 快速计算:哈希函数应该能够高效地处理大量数据。

MD5 是一种具体的哈希算法。它将任意长度的输入数据生成一个 128 位的哈希值(通常表示为 32 个十六进制字符,例如 “d41d8cd98f00b204e9800998ecf8427e”)。MD5 曾经被广泛用于文件校验、密码存储等场景。

MD5 的特点: 输出长度:128 位(32 个十六进制字符)。 应用:文件完整性校验(如下载文件的校验)、数字签名、密码加密(虽然现在不推荐用于密码存储,因为安全性较低)。 缺点:随着计算能力的提高,MD5 已被发现存在安全漏洞,比如容易发生“碰撞”(即不同的输入生成相同的哈希值)。因此,在需要高安全性的场景中(如金融或敏感数据保护),已经不再推荐使用 MD5

示例服务器

下载

http://localhost:8000/download/Wallpaper1.jpg

http://localhost:8000/download/Wallpaper2.jpg

http://localhost:8000/download/Wallpaper3.jpg

http://localhost:8000/download/Wallpaper4.jpg

http://localhost:8000/download/Wallpaper5.jpg

http://localhost:8000/download/Wallpaper6.jpg

http://localhost:8000/download/Wallpaper7.jpg

http://localhost:8000/download/Wallpaper8.jpg

http://localhost:8000/download/Wallpaper9.jpg

http://localhost:8000/download/Wallpaper10.jpg

上传

文件信息协商

请求路径:/api/upload/handshake

请求方法:POST

字段:

字段名含义是否必须
fileId文件的 MD5 编码是
ext文件的后缀,例如:.jpg是
chunkIds文件分片的编号数组,每个编号是一个 MD5 编码是

可能的响应:

{
	code: 0,
  msg: '',
  data: '<http://localhost:8000/upload/a32d18.jpg>' // 服务器已有该文件,无须上传
}
{
	code: 0,
  msg: '',
  data: ['md5-1', 'md5-2', 'md5-5'] // 服务器还需要上传的分片
}

可能发生的失败响应:

{
	code: 403,
	msg: '请携带文件编号',
	data: null
}

分片上传

请求路径:/api/upload

请求方法:POST

字段:

字段名含义是否必须
file分片的二进制数据是
chunkId分片的 MD5 编码是
fileId分片所属文件的 MD5 编码是

上传成功的响应:

{
	code: 0,
  msg: '',
  data: ['md5-2', 'md5-5'] // 服务器还需要上传的分片
}

可能发生的失败响应:

{
	code: 403,
	msg: '请携带文件编号',
	data: null
}
最近更新:: 2025/7/11 12:50
Contributors: AK
Prev
✨ 网络性能优化
Next
域名和 DNS