Cómo almacenar y recuperar imágenes de datos de tipo: image / jpeg; base64?

Anindya:

Estoy tratando de subir imágenes desde el front-end para mi servidor PHP. Estoy convertir la imagen en data:image/jpeg;base64el uso FileReader()de JavaScript. Aquí está mi código 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);
    }

Insertar el "image / jpeg; base64, ..." completa cadena en mi base de datos MySQL (en el tipo de texto largo).

$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();   
}

Pero cuando traté de mostrar las imágenes después de recuperar las src-enlaces de la base de datos, las imágenes son destruidos o no aparecen en absoluto. Aquí está el código:

$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
    }
}

¿Cómo debo almacenar y recuperar adecuadamente dicha imagen-datos en PHP?

Anindya:

Finalmente Resuelto! El problema fue que la base64cadena de datos recibida por el servidor PHP faltaba el +símbolo. Los +símbolos fueron sustituidos por white spaces. Incluso el urldecode()de PHP no estaba leyendo el +símbolo correctamente.

Así que mediante la sustitución de aquellos white spacespor +funcionó!

Interfaz:

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);
    }

Back-end:

<?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";
}
?>