如何將二進制數據作為文件上傳發送到服務器？

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() 。