HTTP range

Content-Range
实体头.用于指定整个实体中的一部分的插入位置,他也指示了整个实体的长度。在服务器向客户返回一个部分响应,它必须描述响应覆盖的范围和整个实体长度。一般格式:
Content-Range: bytes (unitSPfirst byte pos) - [last byte pos]/[entity legth]
一般向服务器请求 Range:(unitSPfirst byte pos)-[last byte pos] 服务器才会向客户返回这个头
如向服务器 GET
008-02-21 05:49:47 GET /file.rar HTTP/1.1
2008-02-21 05:49:47 Connection: close
2008-02-21 05:49:47 Host: 116.1.219.219
2008-02-21 05:49:47 Range: bytes=100-300  //意思是下载file.rar的100到300这部分数据

一般正常回应
2008-02-21 05:49:47 Content-Length: 200    //300-200=100,就是要下载的大小
2008-02-21 05:49:47 Content-Type: application/octet-stream
2008-02-21 05:49:47 Content-Range: bytes 123-456/801 //801:文件总大小+1(一般都+1的,我在研究ing) 

请求下载整个文件:
GET  /file.rar  HTTP/1.1
Connection:  close
Host:  116.1.219.219
Range:  bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头
一般正常回应
HTTP/1.1 200 OK
Content-Length:  801      
Content-Type:  application/octet-stream  
Content-Range:  bytes  0-800/801 //801:就是文件总大小,位置是0开始的,而不是从1!!!我的错误所在


from http://www.cnblogs.com/happyhotty/articles/2056812.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTTP RangeHTTP 协议中用于实现断点续传和多线程下载的一种机制。在 Vue 中使用 HTTP Range 实现断点续传可以通过以下步骤完成: 1. 在 Vue 组件中引入 axios 库: ```javascript import axios from 'axios'; ``` 2. 创建一个 axios 实例,并设置请求头 Range,示例代码如下: ```javascript const instance = axios.create({ headers: { Range: 'bytes=' + start + '-' + end } }); ``` 其中,start 和 end 分别表示需要请求数据的起始位置和结束位置。 3. 发送 HTTP 请求,并在响应中获取数据的总长度,示例代码如下: ```javascript instance.get(url).then(res => { const contentRange = res.headers['content-range']; const totalLength = contentRange ? parseInt(contentRange.split('/')[1]) : res.data.length; // 处理请求返回的数据 }); ``` 其中,content-range 是响应头中返回的数据范围信息,totalLength 表示需要请求的数据总长度。 4. 将请求返回的数据拼接到已有数据后面,示例代码如下: ```javascript instance.get(url, { responseType: 'arraybuffer' }).then(res => { const data = new Uint8Array(res.data); const buffer = new ArrayBuffer(totalLength); const arr = new Uint8Array(buffer); arr.set(chunk, start); // 处理数据 }); ``` 其中,arraybuffer 表示响应数据的类型为二进制数据。 5. 在处理数据时,需要将请求返回的数据拼接到已有数据后面,示例代码如下: ```javascript const blob = new Blob([data], { type: 'application/octet-stream' }); const url = URL.createObjectURL(blob); this.videoSrc = url; ``` 其中,data 是请求返回的数据,videoSrc 是需要播放的视频地址。 通过以上步骤,就可以使用 HTTP Range 实现断点续传,在 Vue 中播放视频等大文件时,可以提高用户体验,减少视频卡顿等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值