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

1、断点续传原理

       断点续传是从HTTP/1.1开始支持的。而在断点续传的请求中主要用到的是http头中的Range和Content-Range这两个字段。

(1)Range

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

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

(2)Content-Range

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

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

例如:断点续传一遍流程

请求下载整个文件

GET /test.rar HTTP/1.1
Connection: close
Host: 116.1.219.219
Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头
<
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值