如何存储和检索数据类型的图像：image/jpeg;base64？答案

【问题标题】：How to store and retrieve images of type data:image/jpeg;base64?如何存储和检索数据类型的图像：image/jpeg;base64？
【发布时间】：2020-04-01 15:36:20
【问题描述】：

我正在尝试将图像从前端上传到我的 PHP 服务器。我在javascript中使用FileReader()将图像转换为data:image/jpeg;base64。这是我的js代码：

fileSelectHandler = (event) => {
        let file = event.target.files[0];
        console.log(file);
        const reader = new FileReader();
        reader.onload = () => {
            this.setState({
                src: reader.result
            });
        }
        reader.readAsDataURL(file);
    }


    postImage = () => {
        var http = new XMLHttpRequest();
        var url = 'http://localhost:9090/assign/uploadimage.php';
        var params = 'source=' + this.state.src;
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                console.log(http.responseText);
            }
        }
        http.send(params);
    }

我将完整的“image/jpeg;base64,...”字符串插入我的 MySQL 数据库（长文本类型）。

$conn = new mysqli("localhost","root","","temp_db") or die('connection-error');

if(isset($_POST['source'])){
    $data = $_POST['source'];
    $stmt = $conn->prepare("insert into f_data values (?)");
    $stmt->bind_param("s",$data);
    $done = $stmt->execute();
    echo "- inserted -";
    $stmt->close();   
}

但是当我从数据库中检索 src 链接后尝试显示图像时，图像要么被破坏，要么根本不显示。代码如下：

$conn = new mysqli("localhost","root","","temp_db");
if(!$conn){
    die("connection-error-occured");
}

$stmt = $conn->prepare("select * from f_data");
$stmt->execute();

$result = $stmt->get_result();
if($result->num_rows != 0){
    while($row = $result->fetch_assoc()){ ?>
    <img src = "<?php echo $row['src']; ?>" />
    <?php
    }
}

我应该如何在 PHP 中正确存储和检索此类图像数据？

【问题讨论】：

标签： php mysql reactjs

【解决方案1】：

终于解决了！问题是PHP服务器接收到的base64数据字符串缺少+符号。 + 符号已替换为 white spaces。甚至 PHP 中的 urldecode() 也无法正确读取 + 符号。

因此，将那些 white spaces 替换为 + 就成功了！

前端：

postImage = () => {
        var http = new XMLHttpRequest();
        var url = 'http://localhost:9090/assign/uploadimage.php';
        var params = 'source=' + encodeURI(this.state.src);
        http.open('POST', url, true);
        http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                console.log(http.responseText);
            }
        }
        http.send(params);
    }

后端：

<?php
//replacing ' ' with '+'
function full_decode($str){
    return str_replace(" ","+",$str);
}

$conn = new mysqli("localhost","root","","temp_db");
if(!$conn){
    die("connection-error");
}

if(isset($_POST['source'])){
    $data = json_decode($_POST["source"],true);
    $data_src = urldecode($data['src']);
    $full_src = full_decode($data_src);
    $stmt = $conn->prepare("INSERT INTO f_data VALUES (?)");
    $stmt->bind_param("s",$full_src);
    $stmt->execute();
    $stmt->close();
    echo "inserted";
}
?>

【讨论】：