将base64字符串通过xhr发送到服务器并在服务器端解码为文件

Question

我正在尝试将一个base64编码的图片发送到服务器，对应的JavaScript代码如下：

var xhr=new XMLHttpRequest()
var reader=new FileReader()
reader.onloadend=function(e){
xhr.onload=function(e){
alert(xhr.responseText)
}
xhr.open("POST","upload.php");
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        //xhr.setRequestHeader("X-File-Name", file.name);
        //xhr.setRequestHeader("X-File-Type",file.type)
xhr.send(e.target.result)
}
reader.readAsDataURL(file)
},false)

在PHP中，看起来像这样：

echo "some response Text";
$postdata = file_get_contents("php://input");
file_put_contents('MyFile.jpg', base64_decode($postdata));

最终，服务器会得到与发送文件大小完全相同的文件，但是它无法打开。
有人有什么想法吗？非常感谢！

- Lanston

---

用十六进制编辑器打开它们，看看是否有明显的错误。 - TheCodeKing

Answer 1

reader.readAsDataURL(file)

data URL不同于文件的base64版本，因为它还包含额外的垃圾信息。其格式如下：

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

请参阅维基百科。

尝试对其进行简单的正则表达式匹配：

var data = dataURL.match(/,(.*)$/)[1];

或者，在你的代码中：

xhr.send(e.target.result.match(/,(.*)$/)[1]);

- beatgammit

---

这个工作得很好 - 最好在Javascript中去除额外的东西，这样当它到达服务器时，你就不用担心了。 - geekyaleks