XMLHttpRequest POST到PHP删除加号

我正在将一个来自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控制台日志完全相同的数据，但不带+，而是带空格，这会导致JPEG文件损坏

---

我应该怎么做？

您应该对数据URL进行URL编码：

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

---

它不会移除它们

+

表示

应用程序/x-www-form-urlencoded

数据中的“空格”。因此，当URI在服务器上解码时，它们被转换为空格

像往常一样，获取一些数据并将其放入URL，您需要：

---

实际上，URLENCDE是PHP函数，encodeURIComponent是JavaScript函数.Doh。我应该知道的。非常感谢D

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