http range 下载大文件分片

摘自:https://www.jianshu.com/p/32c16103715a

上传分片下载也能分

HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件,或者与文件下载的断点续传功能搭配使用时非常有用。

检测服务器端是否支持范围请求

假如在响应中存在 Accept-Ranges 首部(并且它的值不为"none"),那么表示该服务器支持范围请求。例如,你可以使用 cURL 发送一个 HEAD 请求来进行检测。

image.png

image.png

从服务器端请求特定的范围

  • 表示第二个500字节:bytes=500-999
  • 表示最后500个字节:bytes=-500
  • 表示500字节以后的范围:bytes=500-
  • 第一个和最后一个字节:bytes=0-0,-1
  • 同时指定几个范围:bytes=500-600,601-999
  • bytes=0- 不限制

成功时服务器返回 206 Partial Content 状态码和 Content-Type:multipart/byteranges; boundary=3d6b6a416f9b5 头部,Content-Type:multipart/byteranges 表示这个响应有多个 byterange。每一部分 byterange 都有他自己的 Content-type 头部和 Content-Range,并且使用 boundary 参数对 body 进行划分。

image.png

只有指定范围的图片被返回

image.png

复制代码
axios
            .get("http://172.16.8.24:8080/test.png", {
                headers: { "Range": "bytes=0-100000" }, // 字节
                responseType: "arraybuffer",
            })
            .then((res) => {
                console.log(res);
                resolve(res.data);
            })
            .catch((err) => {
                reject(err);
            });

总结

最后把结果拼在一起还待完善~

作者:前端早晚自习

链接:https://www.jianshu.com/p/32c16103715a

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。