0

Estoy intentando hacer una funcionalidad modificar para mi app, en ella se modifican todos los valores (si no se quiere modificar alguno se deja como está, ya que antes de modificar se consulta si existe el usuario) mi problema lo tengo con la imagen. No consigo que llegue al API y estoy saliendo loco porque no lo entiendo, dejo código aquí a ver si veis algo.

Consigo dar de alta todos los valores excepto la imagen, no entiendo porque porque tengo la funcionalidad Alta de usuario hecha y funciona perfectamente (con imagen).

La imagen es muy liviana y pesa menos de 2mb

Gracias de antemano

MI ARCHIVO PHP

<?php

    usleep(300000);
    
    header("Content-type:application/json; charset = utf-8"); 

    // "cURL" es una librería que permite realizar peticiones HTTP con el objetivo de transferir información con sintaxis de URL.
    // En el contexto de PHP, permite crear un script que literalmente se comporte como un navegador para así ->
    // realizar una petición a otro servidor remoto.
    // más info: https://blog.educacionit.com/2017/08/16/guia-sobre-como-utilizar-curl-en-php/


    // configuramos los valores que vamos a pasar a la API
    $v1=strtoupper($_POST['nombre']);
    $v2=strtoupper($_POST['provincia']);
    $v3=strtoupper($_POST['edad']);
    $v4=$_POST['fecha'];
    $foto_reconvertida = file_get_contents($_FILES['foto1']['tmp_name']);
    //$v5_aux=$foto_reconvertida;
    //esto es obligatorio -> no se pueden enviar los datos en binario
    $v5=base64_encode($foto_reconvertida);
    
    // recuperamos la "id" del registro a modificar
    $laid=$_GET['laidregistro'];
    
    // creamos una matriz con los valores
    $variables = array(
        'nombrex' => $v1,
        'provinciax' => $v2,
        'edadx'   => $v3,
        'fechax' => $v4,
        'imagenx' => $v5
    );  
    
    // codificamos a formato "json" los valores
    $datos = json_encode($variables);
    
    $url ='http://127.0.0.1:3000/'.$laid;

    // configuro conexión
    $conexion = curl_init();
    curl_setopt($conexion, CURLOPT_URL, $url);

    // CURLOPT_CUSTOMREQUEST -> método de petición
    curl_setopt($conexion, CURLOPT_CUSTOMREQUEST, "PUT");
 
    // le decimos qué paramáetros enviamos (pares nombre/valor, también acepta un array)
    curl_setopt ($conexion, CURLOPT_POSTFIELDS,$datos);
 
    //le decimos que queremos recoger una respuesta 
    curl_setopt($conexion,CURLOPT_RETURNTRANSFER,true);
 
    curl_setopt($conexion, CURLOPT_HTTPHEADER, array('Content-Type: application/json','Content-Length: '. strlen($datos)));
  
 
    //ejecutamos conexión y recogemos la respuesta
    $respuesta = curl_exec ($conexion);
 
    //o el error, por si falla
    //$error = curl_error($ch);
 
    //y finalmente cerramos curl
    curl_close ($conexion);
    
    // si todo va bien-> la respuesta de la API será:
    // res.json({estado: 'true'});
    echo $respuesta;
?>

MI ARCHIVO DEL API REST

//MODIFICAR
router.put('/:id', async (req, res) =>
{
    console.log("Modificación de Empleado: ");
    var { nombrex,provinciax,edadx,fechax } = req.body;
    /*let nombrex =  nombre;
    let provinciax = provincia;
    let edadx = edad;
    let fechax = fecha;*/
    var { id } = req.params;
    //var auxiliar=new Buffer.from(imagenx, 'base64');
    var auxiliar=new Buffer.from(req.body.imagenx, 'base64');
    console.log("Modificación de Empleado: "+id, nombrex, provinciax, edadx, fechax, auxiliar);
    //var sql="CALL clienteAdd_Edit(?,?,?,?,?,?);";

    var sql = "UPDATE clientes SET nombre = '"+[nombrex]+"', provincia = '"+[provinciax]+"', edad = '"+[edadx]+"', fecha = '"+[fechax]+"', imagen = '"+[auxiliar]+"' WHERE id = '"+[id]+"'";

    
    try
    {
        

        await connection.query(sql,function(error, datos, fields)
            {
                if (error)
                {
                     //throw error;
                     console.log('número de error: '+error.errno);
                     console.log('mensaje de error: '+error.sqlMessage);
                     res.json({estado: 'false'});
                }
                else
                {
                    res.json({estado: 'true'});
                    console.log("UPDATE: consulta ejecutada");
                }
            });
    }
    catch (error)
    {
            console.error("El error producido:\n"+error.message);
            // detenemos el servidor y mostramos error
            process.exit();
    }   

    console.log('fin');
}); 

MI FORMULARIO

<div class="contenedor-formulario">
            <form id="formulario1" name="formulario1"
            ACTION="" TARGET="" METHOD="POST" autocomplete="off" ENCTYPE="multipart/form-data"
            onsubmit="consulta_API(document.getElementById('id').value,1);return false;">    

            <legend class="leyenda">Modificar Cliente: </legend><br>
            
            <div class="form-group">
                <label>Id:</label>
                <input class="input-control" type="number" id="id" name="id"  min="1" max="999" style="width:10%" required autocomplete="off"
                onKeyPress="if(this.value.length>2) return false;">
            </div>
            
            <div class="form-group">
                <label>Nombre:</label>
                <input class="input-control" id="nombre" name="nombre" disabled value="" style="width: 35%">
            </div>

            <div class="form-group">
                <label>Provincia:</label>
                <input class="input-control" id="provincia" name="provincia" disabled value="" style="width: 35%">
            </div>

            <div class="form-group">
                <label>Edad:</label>
                <input class="input-control" id="edad" name="edad" disabled value="" style="width: 20%">
            </div>

            <div class="form-group">
                <label>Fecha:</label>
                <input class="input-control" type="date" id="fecha" name="fecha" disabled style="width: 35%" value=""> 
            </div>

            <div class="form-group">
                <label>Imagen:</label>
                <input class="input-control" id="foto1" name="foto1" type="file" disabled required 
                style="padding-bottom: 10px;border:0px;" onchange="visualizo('foto1','img1')"></input>   
            </div>

            <img id="img1" src="imagenes/usuario.png" width="94" height="94" style="border:1px solid blue" >

           

            <div class="div_mensaje" id="div_mensaje" style="height:35px;"></div>

            <button class="boton" id="boton1" type="reset"
            onclick="document.getElementById('id').disabled=false;
                           document.getElementById('boton2').disabled=false;
                           document.getElementById('boton3').disabled=true;
                           document.getElementById('nombre').disabled=true;
                           document.getElementById('provincia').disabled=true;
                           document.getElementById('edad').disabled=true;
                           document.getElementById('fecha').disabled=true;
                           document.getElementById('foto1').disabled=true;                         
                           document.getElementById('div_mensaje').innerHTML='';
                           document.getElementById('id').focus();">
            <i class="fa fa-trash"></i> Limpiar
            </button>

            <button class="boton" id="boton2" type="submit" form="formulario1"
            onclick="">
            <i class="fa fa-home"></i> Consulta-API
            </button>       

            <button class="boton" id="boton3" type="button" disabled 
            onclick="modificar_API(document.getElementById('id').value)">
            <i class="fa fa-home"></i> Modificar-API
            </button>                       
            
            <button class="boton" id="boton4" type="button"
            onclick="location.href=('index1.html');">
            <i class="fas fa-window-close"></i> Cancelar
            </button>                                       
</form>
</div>

ESTA ES LA RESPUESTA DEL CONSOLE.LOG

introducir la descripción de la imagen aquí

Tampoco devuelve la respuesta (true) Ni siquiera sacándola del try Catch

8
  • Por favor edita la pregunta para agregar el código del formulario, debes incluir el atributo enctype en la etiqueta form para poder enviar archivos y, de paso, explica si la imagen pesa mas de 2mb y si has realizado cambios en php.ini
    – Triby
    el 28 feb. 2022 a las 17:31
  • No puede ser problema del tamaño de la imagen porque la consigo dar de alta, al modificarlo, como consulto si existe el usuario y recupero todos sus datos, es la misma imagen
    – tranco12
    el 28 feb. 2022 a las 18:14
  • y que pasa con los console.log? Ya validaste los datos antes de hacer la peticion PUT? que saca esta linea? console.log("Modificación de Empleado: "+id, nombrex, provinciax, edadx, fechax, auxiliar, imagenx);
    – Pipe
    el 28 feb. 2022 a las 18:24
  • La recupero en esta línea var auxiliar=new Buffer.from(req.body.imagenx, 'base64'); y creo un objeto Buffer para convertirla en binario.
    – tranco12
    el 28 feb. 2022 a las 18:24
  • Saca todos los datos correctamente menos la imagen la muestra como un Buffer vacío :(
    – tranco12
    el 28 feb. 2022 a las 18:25

1 respuesta 1

1

conseguí solucionarlo. Cogí aire y empecé desde el principio.

En primer lugar en script php "PHP-Modificar.php" compruebo si el usuario ha subido una imagen nueva o no. Ya que tras consultar que existe el usuario y mostrar los datos (entre ellos la imagen recuperada de la BDD) la imagen se pinta, pero no se envía en el formulario por lo tanto si no se sube una imagen nueva, no se está enviando ninguna al API.

<?php
    //ini_set('display_errors', '1'); 
    //ini_set('display_startup_errors', '1');
    //error_reporting(E_ALL);
    usleep(300000);
    
    header("Content-type:application/json; charset = utf-8"); 

    // "cURL" es una librería que permite realizar peticiones HTTP con el objetivo de transferir información con sintaxis de URL.
    // En el contexto de PHP, permite crear un script que literalmente se comporte como un navegador para así ->
    // realizar una petición a otro servidor remoto.
    // más info: https://blog.educacionit.com/2017/08/16/guia-sobre-como-utilizar-curl-en-php/

    $id_user=$_GET['id_user'];
    $v1=strtoupper($_POST['nombre']);
    $v2=strtoupper($_POST['provincia']);
    $v3=strtoupper($_POST['edad']);
    $v4=$_POST['fecha'];

    //COMPROBAR SI HAY IMAGEN

    if($_FILES['foto1']['tmp_name'] != ""){
        $foto_reconvertida = file_get_contents($_FILES['foto1']['tmp_name']);
        $v5=base64_encode($foto_reconvertida);
    
        $variables = array(
            //Indica al API si se ha subido o no imagen.
            'subeImg' => 1,
            'nombre' => $v1,
            'provincia' => $v2,
            'edad'   => $v3,
            'fecha' => $v4,
            'imagen' => $v5
            );
    }else{

        $variables = array(
            'subeImg' => 0,
            'nombre' => $v1,
            'provincia' => $v2,
            'edad'   => $v3,
            'fecha' => $v4
            ); 
    }
    

       
    // codificamos a formato "json" los valores
    $datos = json_encode($variables);
    
    $url ='http://127.0.0.1:3000/'.$id_user;

    // configuro conexión
    $conexion = curl_init();
    curl_setopt($conexion, CURLOPT_URL, $url);

    // CURLOPT_CUSTOMREQUEST -> método de petición
    curl_setopt($conexion, CURLOPT_CUSTOMREQUEST, "PUT");
 
    // le decimos qué paramáetros enviamos (pares nombre/valor, también acepta un array)
    curl_setopt ($conexion, CURLOPT_POSTFIELDS,$datos);
 
    //le decimos que queremos recoger una respuesta 
    curl_setopt($conexion,CURLOPT_RETURNTRANSFER,true);
 
    curl_setopt($conexion, CURLOPT_HTTPHEADER, array('Content-Type: application/json','Content-Length: '. strlen($datos)));
  
 
    //ejecutamos conexión y recogemos la respuesta
    $respuesta = curl_exec ($conexion);
 
    //o el error, por si falla
    //$error = curl_error($ch);
 
    //y finalmente cerramos curl
    curl_close ($conexion);
    
    // si todo va bien-> la respuesta de la API será:
    // res.json({estado: 'true'});
    echo $respuesta;
?>

EN SEGUNDO Y ÚLTIMO LUGAR (Lo mas importante)

Cambié el modo de hacer la consulta y le paso un objeto JSON (clave valor) En el API también controlo si el usuario me esta enviando una imagen nueva o no para crear el objeto con imagen o sin ella.

router.put('/:id', async (req, res) =>
{
    console.log("Modificación de Empleado: ");
    const { id } = req.params;

    if(req.body.subeImg === 1){
        var auxiliar=new Buffer.from(req.body.imagen, 'base64');
       
        var user =
        {
            nombre: req.body.nombre,
            provincia : req.body.provincia,
            edad : req.body.edad,
            fecha: req.body.fecha,
            imagen : auxiliar
        }
    }else{
        var user =
        {
            nombre: req.body.nombre,
            provincia : req.body.provincia,
            edad : req.body.edad,
            fecha: req.body.fecha,
        }
    }
    
     

    console.log("Modificación de Empleado: "+user);

    var sql="UPDATE clientes SET ? WHERE id = "+id+";";
    
    try
    {
        await connection.query(sql,user,function(error, datos, fields)
            {
                if (error)
                {
                     //throw error;
                     console.log('número de error: '+error.errno);
                     console.log('mensaje de error: '+error.sqlMessage);
                     res.json({estado: 'false'});
                }
                else
                {
                    res.json({estado: 'true'});
                    console.log("UPDATE: consulta ejecutada");
                }
            });
    }
    catch (error)
    {
            console.error("El error producido:\n"+error.message);
            // detenemos el servidor y mostramos error
            process.exit();
    }   
});

Agradezco mucho vuestra ayuda, espero que aporte algo a la comunidad.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.