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

我有一个图像的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>

var oReq=新的XMLHttpRequest（）；
open（“POST”，“/endpoint.php”，true）；
setRequestHeader（“内容类型”、“应用程序/八位字节流”）；
setRequestHeader（“X-File-Name”、“abc.jpg”）；
oReq.setRequestHeader（“X-request-With”，“XMLHttpRequest”）；
//无论“二进制”是否在此进行base64编码和解码，此操作都会失败
//或者当‘binary’实际上已经是二进制的时候
send（document.getElementById（'binary'）.innerHTML）；

$file

是文件的实际内容。这将在Firefox中出错，但我们只关心这个项目中的Chrome，因为

iframe

来自嵌入式webkit的一个实例

无论如何，这些数据都会被发送出去，而且由于某种原因，它们总是一个损坏的图像。我还尝试将打印到

div

中的文件进行base64编码（实际上是有效的HTML），然后在发送之前对其进行解码。我就是想不出一个编码/解码/打印的组合来让它在服务器端工作

我还尝试通过以下方式将

send

更改为

sendAsBinary

：

---

有什么想法吗？

首先，如果可能的话，不要将文件内容存储在

中（或者DOM中的任何地方）。如果可以，最好是

var myfile=“…”

。如果必须将其存储在DOM中，那么它肯定必须是base64。不要使用

innerHTML

访问内容，而是使用

textContent

其次，我认为在这种情况下不需要二进制，因为您不打算（AFAIK）将二进制数据从iframe传输到主页面，您必须将其编码为字符串（base64编码），一旦它成为字符串，就可以安全地将其作为标准值传输，并且base64在接收端对其进行解码（PHP）

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

---

编辑#2：您可能能够将文件内容放入画布元素，然后使用

toBlob（）

，将其作为Blob取出。要将内容放入画布，您必须首先根据base64编码生成一个dataURL（基本上，在base64内容之前加上“data:image/jpg；base64”这样的前缀），将该数据URL分配为

的

src

，然后将

中的

drawImage（）

分配给您的

我无法通过服务器路由使其工作，因此我向服务器传递了一个标志，表示“嘿，这是base64\u编码的”结果没有太多的返工，因此感谢

@mr.VVoo

我还尝试将发送的数据更改为

新Blob（[thatinerhtml]，{type:“image/jpg}）

但是

内容长度

通过

sendAsBinary

转到

0

。在这种情况下，使用普通

send

返回到损坏的图像。更好的解决方案是：将base64编码字符串发送到服务器。这在每种场景下都有效处理我们上传的控制器需要“真正”工作上传和此场景。由于它假设实际的文件上传，它使用数据流，无法解码-如果不在该端进行大量返工，您可能也会看到这一点，但这是草稿，不受所有浏览器的支持。我需要对WebKit友好，因为此集成只会进入WebKit实例。我在o我认为可能太疯狂的

canvas

解决方案。但在我尝试了一切之后，它开始变得更具吸引力。我还考虑作为一种过渡，使用另一个端点。我试图避免使用更多服务器代码，而采用某种JS方式。canvas解决方案可能听起来“太疯狂”乍一看，在处理画布和图像时，这实际上是一种普通的标准做法。你最终不得不来回移动数据以获得不同的转换或表示。总之，我所描述的最多只有5行代码。嘿，你确定

toBlob

在Chrome

ca中可以工作吗nvas

元素？所有的谷歌搜索都指向no，例如，哦，我的测试文件只有

DOM

中有它……它将来自

postMessage

继续我刚才说，如果你试图模拟

postMessage

（在javascript变量中有内容，

var content=“…”

更准确。