找不到base64图像代码无效的原因答案

【问题标题】：Unable to find why base64 image code is invalid找不到base64图像代码无效的原因
【发布时间】：2018-03-07 21:51:30
【问题描述】：

谁能告诉我为什么here中链接的base64图像代码无效？我认为语法存在某种问题？

我的文件如下所示：

/9j/4AAQSkZJR..........39b/lRk5HGVz8

我已将其截断（“...”），因为整个文件不适合问题。

这是我的 Javascript Fetch API POST 代码：

function submitPhoto(){ 


    console.log("name: "+name);
    console.log("email: "+email);
    console.log("market: "+market);
    //console.log("base64: "+b64data);


    fetch('http://fanbeauties.com/app/submit-photo.php?pass=MY_PASS', { 
    method: "POST", 
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: '&name='+name+'&email='+email+'&market='+market+'&picture='+b64data
     });


};

【问题讨论】：

不要链接到外部资源并期望我们点击它们。在此处发布相关信息。无需访问任何外部网站即可回答问题。
多么有趣的评论。你甚至检查过链接吗？为什么人们在不理解问题的情况下投了反对票？
这个问题对我来说似乎有效。他没有质疑链接的原因是因为链接是关于他的 base64 编码图像。像它会像在问题吨AgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5jp6vLz9PX29 / j5v / bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf / bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf / dAAQBP / aAAwDAQACEQMRAD的（：跨度>
老兄，他一开始并不是在寻找修复代码生成器的方法。也许他在某个地方找到了它，问题很简单，比如这个字符串是否是有效的 base64 编码图像，或者我在使用它时遇到问题并且代码是正确的。 @zero298
@MishelParkour：尽管对你来说可能是毁灭性的，但反对票是有道理的。该问题应在此处包含所有相关信息，以便在链接不再有效时对未来的读者有用。

标签： javascript image encoding base64

【解决方案1】：

是的，我认为语法不正确，它可能不是有效的图像或某些部分已被删除。

查看此链接https://jsfiddle.net/casiano/xadvz/

&lt;img src="data:image/gif;base64,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"&gt;

格式应该以这个开头：data:image/gif;base64, 或只是这个image/gif;base64,，所以第一部分显示图像类型。在您的情况下，它应该是 image/jpeg 而 ;base64, 就像定义它是一个 base64 内联图像。

在代码的末尾或任何base64编码内容的末尾应该有==或=之类的，但您不应该将其从编码内容中删除。

【讨论】：

谢谢米歇尔。我实际上一直在使用那个小提琴来尝试和调试。我的 base64 是从 iOS 应用程序生成并发送到服务器的。
@MikeBarbaro 好的 mike 现在此时您可能需要寻找解决生成器问题的方法，或者您可能会发布另一个关于确切问题的问题以及您尝试过的代码远。

【解决方案2】：

所以这是另一个答案。我单独发布它，因为您的问题已更改。

有两种方法可以实现这一点。首先是使用 URL-encode 和 URL-decode。因此，在您发送包含图像数据的 base64 字符串之前，您对它进行编码，然后在服务器端您首先回显是查看它的外观。然后你使用 PHP urldecode 来取回你的字符串。

使用 javascript 进行 URL 解码/编码：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

在 PHP 中的 URL 解码/编码：

http://php.net/manual/en/function.urlencode.php

https://stackoverflow.com/a/4744917/9453736

但在这种情况下应该更适合的另一种方式是在您想发布内容时使用帖子正文。但是由于您已经在使用库来做到这一点，我猜这只是您的库的限制。因此，请尝试检查是否有其他方法可以使用该库为 POST 设置参数。就像您将参数添加到 body 但您执行此操作的方式（库）只会限制您。因此，例如，当您执行此操作时，您不能使用某些字符：

{
     body: '&name='+name+'&email='+email+'&market='+market+'&picture='+b64data
{

因此，如果您未能找到其他方法来完成请求。就像您可以使用纯 JavaScript 和其他方式使用表单对象一样。因此，如果您失败了，请使用第一个尝试对数据进行 url 编码。

javascript中的url编码示例：

// encodes characters such as ?,=,/,&,:
console.log(encodeURIComponent('?x=шеллы'));
// expected output: "%3Fx%3D%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"

console.log(encodeURIComponent('?x=test'));
// expected output: "%3Fx%3Dtest"

PHP中的urldecode示例：

$query = "my=apples&are=green+and+red";

foreach (explode('&', $query) as $chunk) {
    $param = explode("=", $chunk);

    if ($param) {
        printf("La valeur du paramètre \"%s\" est \"%s\"<br/>\n", urldecode($param[0]), urldecode($param[1]));
    }
}

【讨论】：