http range 下载大文件分片

上传分片下载也能分
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);
            });

总结

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