[英]How can I send binary data to server as a file upload?
I have the base64-encoded string of an image. 我有图像的base64编码的字符串。 It gets to me from another site, with an
iframe
and the data from postMessage
. 它通过另一个
iframe
和来自postMessage
的数据从另一个站点获得。 I know this sounds horrible, but it's an integration I can't get around for reasons beyond my control. 我知道这听起来很可怕,但这是我无法控制的无法解决的集成。
I'm trying to get a proof-of-concept working in a PHP test file. 我试图在PHP测试文件中获得概念验证。
I have code like this: 我有这样的代码:
<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
is the actual contents of the file. $file
是$file
的实际内容。 This will error in Firefox, but we only care about Chrome for this project, since the iframe
is coming from an instance of embedded webkit. 在Firefox中,这将出错,但是我们只关心该项目的Chrome,因为
iframe
来自嵌入式Webkit实例。
Anyway this data sends up and for some reason is always a corrupt image. 无论如何,这些数据都会发送出去,并且由于某种原因始终是损坏的图像。 I've also tried making the file printed into the
div
be base64-encoded ( which is actually valid HTML ), and then decoding it before sending up. 我还尝试过将打印到
div
的文件进行base64编码(实际上是有效的HTML),然后在发送之前对其进行解码。 I just can't come up with a combo of encoding/decoding/printing that makes it work on the server side. 我只是无法提供使它在服务器端工作的编码/解码/打印组合。
I also tried changing send
to sendAsBinary
via: 我还尝试通过以下方式将
send
更改为sendAsBinary
:
Uploading a binary string in WebKit/Chrome using XHR (equivalent to Firefox's sendAsBinary) 使用XHR在WebKit / Chrome中上传二进制字符串(相当于Firefox的sendAsBinary)
Any ideas? 有任何想法吗?
我无法通过服务器路由使它正常工作,所以我最终向服务器传递了一个标志,说“嘿,这是base64_encoded”,事实证明它不需要太多的返工,所以谢谢@mr.VVoo
Firstly, if possible, don't store the file contents in a <div>
(or anywhere in the DOM, for that matter). 首先,如果可能的话,不要将文件内容存储在
<div>
(或者在DOM中的任何地方)。 If you can, it'd be better for it to be <script>var myfile="..."</script>
. 如果可以的话,最好是
<script>var myfile="..."</script>
。 If you simply must store it in the DOM, it's got to be base64, for sure. 如果只需将其存储在DOM中,那么肯定是base64。 And don't use
innerHTML
to access the contents, use textContent
instead. 并且不要使用
innerHTML
访问内容,而应使用textContent
。
Secondly, I don't think you need binary in this case, because you're not going to (AFAIK) transport the binary data from your iframe to your main page, you're going to have to encode it as a string (the base64 encoding), and once it's a string, it's safe to transmit that as a standard value, and the base64-decode it on the receiving end (the PHP). 其次,在这种情况下,我认为您不需要二进制文件,因为您不会(AFAIK)将二进制数据从iframe传输到您的主页,因此您必须将其编码为字符串( base64编码),一旦它是一个字符串,就可以安全地将其作为标准值进行传输,然后在接收端(PHP)对它进行base64解码。
edit: saw your comment above about needing to make it as much like a normal file upload as possible. 编辑:在上面看到了关于需要使其尽可能像正常文件上传那样的评论。 I'd suggest then that THIS use-case needs a separate end-point, which receives the base64 string only, does nothing else, and then it reconstitutes the file, and then it forwards it on to the other end-point.
然后,我建议这个用例需要一个单独的端点,该端点仅接收base64字符串,不执行其他任何操作,然后重新构成文件,然后将其转发到另一个端点。
edit #2: you might be able to put the file contents into a canvas element, and then get them back out as a Blob, using toBlob()
. 编辑#2:您可以将文件内容放入canvas元素,然后使用
toBlob()
将它们作为Blob toBlob()
。 to get the contents into a canvas, you'll have to first make a dataURL from your base64 encoding (basically, prepending like "data:image/jpg;base64," ahead of your base64 content), assign that dataURL as the src
of an <img>
, then drawImage()
that from the <img>
to your <canvas>
. 让内容制作成画布,你必须首先从您的base64一个dataURL编码(基本上,像前面加上“数据:图像/ JPG; BASE64,”你提前的base64内容),分配该dataURL作为
src
的一个<img>
,然后从<img>
到您的<canvas>
drawImage()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.