http断点续传原理:http头Range 、 Content-Range

所谓断点续传,也就是要从文件已经下载的地方开始继续下载。在以前版本的 HTTP 协议是不支持断点的,HTTP/1.1 开始就支持了。一般断点下载时才用到 Range 和 Content-Range 实体头。

Range 

用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式:

Range:(unit=first byte pos)-[last byte pos] 

Content-Range

用于响应头,指定整个实体中的一部分的插入位置,他也指示了整个实体的长度。在服务器向客户返回一个部分响应,它必须描述响应覆盖的范围和整个实体长度。一般格式: 

Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth] 

请求下载整个文件: 

  1. GET /test.rar HTTP/1.1 
  2. Connection: close 
  3. Host: 116.1.219.219 
  4. Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头

一般正常回应

  1. HTTP/1.1 200 OK 
  2. Content-Length: 801      
  3. Content-Type: application/octet-stream 
  4. Content-Range: bytes 0-800/801 //801:文件总大小
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-upload组件是Element UI中的一个文件上传组件,它支持断点续传功能。断点续传是指在文件上传过程中,如果上传中断或失败,可以从中断的位置继续上传,而不需要重新上传整个文件。 要实现el-upload的断点续传功能,可以按照以下步骤进行操作: 1. 在el-upload组件中设置`:auto-upload="false"`,这样文件不会自动上传。 2. 监听el-upload组件的`change`事件,获取选择的文件。 3. 将文件分成多个块(chunk),每个块的大小可以根据需求进行设置。 4. 使用XMLHttpRequest或者axios等工具发送每个块的数据到服务器,并在请求中设置`Content-Range`来指定块的范围。 5. 服务器接收到每个块的数据后,将其保存到指定位置。 6. 当所有块都上传完成后,服务器将这些块合并成完整的文件。 以下是一个示例代码,演示了如何使用el-upload实现断点续传功能: ```html <template> <el-upload class="upload-demo" :action="uploadUrl" :auto-upload="false" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="handleUpload">上传文件</el-button> </el-upload> </template> <script> export default { data() { return { uploadUrl: '/upload', // 上传接口地址 fileList: [], // 文件列表 }; }, methods: { handleChange(file) { this.fileList = file.raw; }, handleRemove(file) { // 移除文件时的操作 }, handleUpload() { // 上传文件时的操作 // 将文件分块并上传 // 合并块文件 }, }, }; </script> ``` 请注意,上述代码中的`uploadUrl`需要根据实际情况进行设置,用于指定文件上传的接口地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值