通过 JavaScript XHR2 对象在 PHP 中发送 ArrayBuffer

Posted 2023-02-24

【中文标题】通过 JavaScript XHR2 对象在 PHP 中发送 ArrayBuffer

【英文标题】：Sending an ArrayBuffer in PHP through JavaScript XHR2 object

【发布时间】：2015-01-02 01:23:07

【问题描述】：

在这里，我正在编写新版本的 AJAX 库，它基于支持 XHR2 的 Promise (https://github.com/pyrsmk/qwest)。我目前正在编写单元测试，现在 95% 的库是健壮的。无论如何，我需要验证我们是否可以成功检索 ArrayBuffer（XHR2 支持 'arraybuffer' 响应类型），但是如何使用 php 生成这个 ArrayBuffer？我使用什么协议？ Base64？

我真的不知道我应该如何处理整个事情......

编辑：似乎当我向 PHP 发送 ArrayBuffer 时，数据直接由 $_POST 变量处理

【参考方案1】：

简介

好吧，您不发送“ArrayBuffer”。您发送的是数据并指定格式以理解该数据。然后，客户可以选择最好的方式来解释它。

因此，ArrayBuffer 只是一个用于数据（二进制数据）的通用固定长度容器，它使您能够使用 javascript 类型数组创建底层数据的“视图”。很酷的是，可以从单个 ArrayBuffer 源创建多个视图。

---

话虽如此，在您的具体情况下，您可以在 PHP 中发送二进制数据，就像在 PHP 中发送任何数据一样。

示例：

server.php

$filename = 'img.png';
$fsize = filesize($filename);

$handle = fopen($filename, "rb");
$contents = fread($handle, $fsize);
fclose($handle);

header('content-type: image/png');
header('Content-Length: ' . $fsize);

echo $contents;

或更短

$filename = 'img.png';

header('content-type: image/png');
header('Content-Length: ' . filesize($filename));

readfile($filename);

---

client.js

var xhr = new XMLHttpRequest();

xhr.open('GET', 'server.php', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) 
    var uInt8Array = new Uint8Array(this.response);
    console.log(uInt8Array);
;

xhr.send();

【参考方案2】：

在 php 中处理二进制数据有点棘手。要响应 ArrayBuffer，您必须将其转换为二进制字符串并使用 echo 语句生成。

要从 8 位数组生成二进制字符串，需要使用 pack 语句。如果服务器不支持 PHP 5.6+ 版本，每个数组项都可以通过点运算符进行转换和连接：

server.php

<?php
    header('content-type: application/octet-stream');

    $arrayBuffer = array(0, 1, 2, 253, 254, 255);

    $binary = "";
    for($index = 0; $index < count($arrayBuffer); $index++)
    
        $binary = $binary.pack("C*", $arrayBuffer[$index]);
    

    echo $binary;
?>

原始数据的 MIME 类型是 application/octet-stream。在客户端的 JavaScript 代码如下所示：

client.js

let xmlRequest = new XMLHttpRequest();
xmlRequest.open('POST', 'server.php');
xmlRequest.responseType = 'arraybuffer';
xmlRequest.onload = event =>

    let arrayBuffer = new Uint8Array(event.target.response);
    console.log('arrayBuffer: ', arrayBuffer); // [0, 1, 2, 253, 254, 255];
;
xmlRequest.send();