Question

我使用axios通过ajax发送base64字符串。使用下面的方法，当它从base64数据编码回到jpg时，我会以某种方式丢失大量数据。如何在没有数据丢失的情况下发送它？

我从输入中获取文件并将其发送到

var reader = new FileReader();
reader.readAsDataURL(file);

并且base64字符串作为ajax发送，axios为

axios.post('url', {main: img})

php脚本收到帖子：

$incoming = json_decode(file_get_contents('php://input'))->main;
$mainImage = str_replace('data:image/jpeg;base64,', '', $incoming);
$img = imagecreatefromstring(base64_decode($mainImage));
$imageSave = imagejpeg($img, './uploaded.jpg');

例如，保存在服务器上的最新文件只有14k，但我上传到输入字段的原始文件是19k。我将客户端上传的base64输出到预览div，并且该图像保存为19k jpg，因此我认为它是php脚本。有关导致数据丢失的因素的任何想法？也许有些axios config value？

Answer 1

发生的是，前端正在发送二进制图像数据base64编码。

目前，您正在解码图像，创建新图像并将其另存为jpg。这只会再次压缩图像。

如果您只是解码数据并将其保存到文件（带有.jpg扩展名），您将获得上传图像的完全副本。

incoming = json_decode(file_get_contents('php://input'))->main;
$mainImage = str_replace('data:image/jpeg;base64,', '', $incoming);
file_put_contents('./uploaded.jpg', base64_decode($mainImage));

Answer 2

您不需要使用imagecreatefromstring。

JS

$.ajax({
    url: 'URL',
    type: "POST",
    processData: false,
    contentType: 'application/octet-stream',
    timeout: 120*1000,
    crossDomain: true,
    xhrFields: {withCredentials: true},
    data: base64Img,
    success: function (d) {
        console.log('Done!');
    }
})

PHP

$img = file_get_contents('php://input');

if (preg_match('/^data:image\/(\w+);base64,/', $img, $fileExt)) {
    $img = substr($img, strpos($img, ',') + 1);
    $fileExt = strtolower($fileExt[1]); // jpg, png, gif

    if (!in_array($fileExt, [ 'jpg', 'jpeg', 'gif', 'png' ])) {
        throw new \Exception('invalid image type');
    }
    if ($img === false) {
        throw new \Exception('base64_decode failed');
    }
} else {
    throw new \Exception('did not match data URI with image data');
}
file_put_contents( 'filename.'.$fileExt, base64_decode($img) );

base64图像到imagecreatefromstring（）丢失数据

2 个答案: