具有多个范围请求的Javascript Fetch API获取二进制Float32Array数据

Question

我正在使用范围请求从大型二进制文件中读取许多 32 位浮点数，不幸的是，我需要从该文件中获得的浮点数位于文件的不同部分，因此我需要对多个范围进行范围请求

fetch("http://example.com/largeBinaryFile.bin", {
        headers: {
            'content-type': 'multipart/byteranges',
            'range': 'bytes=2-5,10-13',
        },
    })
    .then(response => {
        if (response.ok) {
            return response.text();
        }
    })
    .then(response => {
        console.log(response);
    });

由于有多个范围，我必须使用文本而不是 arrayBuffer，当我打印出响应时，我得到

--00000000000000000002
Content-Type: application/octet-stream
Content-Range: bytes 2-5/508687874

1ȹC
--00000000000000000002
Content-Type: application/octet-stream
Content-Range: bytes 10-13/508687874

þC
--00000000000000000002--

如您所见，二进制数据位于不同的部分，我尝试使用 Blob 和 FileReader 将数据转换为 arrayBuffer 并用 Float32Array 包装，但没有成功。请问如何从multiparts中获取32位浮点值？非常感谢您的帮助。

Answer 1

大家好，我是 Frank，一名 Chromium 工程师，以下是我在https://github.com/stealify/stealify项目中使用的一些深层内部原理，用于与 chromium 进行二进制互操作。

const charset = 'x-user-defined';

// Maps to the UTF Private Address Space Area so you can get bits as chars
const binaryRawEnablingHeader = `text/plain; charset=${charset}`;

// UNICODE Private Area 0xF700-0xF7ff.
const convertToAbyte = (chars) => 
  new Array(chars.length)
    .map((_abyte,offset) => chars.charCodeAt(offset) & 0xff);

const _BinaryRawFetch = (url) => fetch(url,{ headers: { 
  'Content-Type': binaryRawEnablingHeader,
  'range': 'bytes=2-5,10-13'
}}).then(
    (res) => convertToAbyte(res.text())
);

要将其转换为例如文本结果，您需要一些东西来切出正确的完整 json 部分，您知道每个部分的大小，然后使用 codePointAt 处理它，就像之前处理字节一样，但只有 .map(String.codePointAt) codePointAt会将其转换为有效的 UTF 8 字符。如果需要的话。我只是用他的 JSON 数组为评论者写了这个。