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是文件的实际内容。这在Firefox中会出错，但我们只关心此项目的Chrome，因为iframe来自嵌入式webkit的实例。

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

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

Uploading a binary string in WebKit/Chrome using XHR (equivalent to Firefox's sendAsBinary)

有什么想法吗？

Answer 1

我无法通过服务器路由工作，所以我最终将一个标志传递给服务器说“嘿这是base64_encoded”事实证明没有那么多返工所以感谢@mr.VVoo

Answer 2

首先，如果可能，请不要将文件内容存储在<div>（或DOM中的任何位置）。如果可以的话，最好是<script>var myfile="..."</script>。如果你只是必须将它存储在DOM中，那肯定是base64。并且不要使用innerHTML来访问内容，而是使用textContent。

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

编辑：看到你上面的评论关于需要尽可能像普通文件上传一样。我建议那个用例需要一个单独的端点，它只接收base64字符串，不做任何其他操作，然后重新构建文件，然后将它转发到另一个端点。

编辑＃2：您可以将文件内容放入canvas元素，然后使用toBlob()将它们作为Blob返回。要将内容放入画布，您必须首先使用base64编码创建一个dataURL（基本上，在base64内容之前加上像“data：image / jpg; base64”），将dataURL指定为{{从src到<img>的{{1}}，然后是drawImage()。

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

2 个答案: