如何将二进制数据作为文件上传发送到服务器？

Question

我有图像的base64编码的字符串。 它通过另一个iframe和来自postMessage的数据从另一个站点获得。 我知道这听起来很可怕，但这是我无法控制的无法解决的集成。

我试图在PHP测试文件中获得概念验证。

我有这样的代码：

<div id="binary"><?=$file;?></div>
<script type="text/javascript">
var oReq = new XMLHttpRequest();
oReq.open("POST", "/endpoint.php", true);
oReq.setRequestHeader("Content-Type","application/octet-stream");
oReq.setRequestHeader("X-File-Name","abc.jpg");
oReq.setRequestHeader("X-Requested-With", "XMLHttpRequest" );
// This fails whether or not 'binary' is base64-encoded and decoded here
// or when `binary` is already actually binary
oReq.send(document.getElementById( 'binary' ).innerHTML );
</script>

$file是$file的实际内容。 在Firefox中，这将出错，但是我们只关心该项目的Chrome，因为iframe来自嵌入式Webkit实例。

无论如何，这些数据都会发送出去，并且由于某种原因始终是损坏的图像。 我还尝试过将打印到div的文件进行base64编码（实际上是有效的HTML），然后在发送之前对其进行解码。 我只是无法提供使它在服务器端工作的编码/解码/打印组合。

我还尝试通过以下方式将send更改为sendAsBinary ：

使用XHR在WebKit / Chrome中上传二进制字符串（相当于Firefox的sendAsBinary）

有任何想法吗？

Answer 1

我无法通过服务器路由使它正常工作，所以我最终向服务器传递了一个标志，说“嘿，这是base64_encoded”，事实证明它不需要太多的返工，所以谢谢@mr.VVoo

Answer 2

首先，如果可能的话，不要将文件内容存储在<div> （或者在DOM中的任何地方）。 如果可以的话，最好是<script>var myfile="..."</script> 。 如果只需将其存储在DOM中，那么肯定是base64。 并且不要使用innerHTML访问内容，而应使用textContent 。

其次，在这种情况下，我认为您不需要二进制文件，因为您不会（AFAIK）将二进制数据从iframe传输到您的主页，因此您必须将其编码为字符串（ base64编码），一旦它是一个字符串，就可以安全地将其作为标准值进行传输，然后在接收端（PHP）对它进行base64解码。

编辑：在上面看到了关于需要使其尽可能像正常文件上传那样的评论。 然后，我建议这个用例需要一个单独的端点，该端点仅接收base64字符串，不执行其他任何操作，然后重新构成文件，然后将其转发到另一个端点。

编辑＃2：您可以将文件内容放入canvas元素，然后使用toBlob()将它们作为Blob toBlob() 。 让内容制作成画布，你必须首先从您的base64一个dataURL编码（基本上，像前面加上“数据：图像/ JPG; BASE64，”你提前的base64内容），分配该dataURL作为src的一个<img> ，然后从<img>到您的<canvas> drawImage() 。