XMLHttpRequest POST到PHP删除加号

Question

我使用以下命令将HTML5文件中的JPEG文件作为字符串发布到PHP:

function createJPG() {
    var dataUrl = document.getElementById('canvas').childNodes[4].toDataURL("image/jpeg");
    console.log(dataUrl);
    var params = "theimage=" + dataUrl;
    var http = new XMLHttpRequest();
    http.open("POST", "/avatar/php/save-avatar.php", true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.send(params);
}

一切都很好,dataUrl是正确的(在控制台中)并包含一个有效的JPEG文件.但是当我用PHP检索它时,所有的加号都被空格所取代？

PHP代码:

$name = "image.jpg";
$data=$_POST['theimage'];

file_put_contents($name, base64_decode(substr($data, strpos($data, ",")+1)));
file_put_contents("../images/avatars/uploads/generated" . rand(0,200) . ".txt", $data);

我使用文本文件来查看数据的样子,因为我无法弄清楚如何回显到JS :).该文本文件包含与JS控制台日志完全相同的数据,但没有+'es和替换空格,这导致JPEG文件损坏.

我该怎么办？

Answer 1

它不会删除它们.+表示application/x-www-form-urlencoded数据中的"空格" .因此,当在服务器上解码URI时,它们会转换为空格.

至于总是采取一些数据,并把它变成一个URL,你需要编码它:

var params = "theimage=" + encodeURIComponent(dataUrl);