0

Ahora mismo me encuentro realizando una aplicación donde debo enviar datos de un formulario a la base de datos, en este formulario se envían también unos campos con imágenes y lo que hago es enviarlas al servidor agregarle un nombre y ese nombre lo retorno al cliente para guardar el nombre de la imagen junto con los demás datos el inconveniente que tengo es que el guarda los datos y las imágenes correctamente pero no guarda los nombres de las imágenes, aquí mi código:

Funciones de envio de datos y imagenes

const submitFinanciado = async (e) => {
    try {
      e.preventDefault();      

      const tabla = "datos";
      let res = await axios.post(
        `http://localhost:${portServer}/createGeneral/${tabla}`,
        {
          nombre: nombre,
          apellido: apellido,                  
          image1: images[0],
          image2: images[1],          
        }
      );
      Swal.fire(res.data.err ? res.data.err : res.data.msg);
      upload();
      navigate("/home");
    } catch (error) {
      console.log(error);
    }
  };

const upload = async () => {
    const formdata = new FormData();
    formdata.append("image1", image1);
    formdata.append("image2", image2);    

    try {
      let campana = "tyt";
      let metodo = "financiado";
      let res = await axios.post(
        `http://localhost:${portServer}/images/${campana}/${metodo}`,
        formdata
      );
      let { rows } = res.data;
      images.push(rows[0]);
      images.push(rows[1]);      
    } catch (error) {
      console.log(error);
    }
  };

Formulario

<form onSubmit={submitFinanciado} className="p-4 rounded-md shadow-xl">       
        <div className="divider" />
        <div className="grid grid-cols-8 gap-6">          
         <div className="col-span-1 flex justify-evenly">
          <label className="label text-sm">Nombre</label>
          <input
           type="text"
           className="input input-bordered w-full"
           value={nombre}
           onChange={(e) => setNombre(e.target.value)}
           required
          />
          </div>       
          <div className="col-span-2 col-start-1">
            <label className="label text-sm">
              Apellido
            </label>
            <input
              type="text"
              className="input input-bordered w-full"
              value={apellido}
              onChange={(e) => setApellido(e.target.value)}
              required
            />
          </div>
          <div className="col-span-2 col-start-1">
            <label className="label text-sm">
              Imagen1
            </label>
            <input
              type="file"
              className="input input-bordered w-full"
              value={image1}
              onChange={(e) => setImage1(e.target.value)}
              required
            />
          </div>
          <div className="col-span-2 col-start-1">
            <label className="label text-sm">
              Imagen2
            </label>
            <input
              type="file"
              className="input input-bordered w-full"
              value={image2}
              onChange={(e) => setImage2(e.target.value)}
              required
            />
          </div>
       </div>
 </form>

y aquí una imagen de como me envía los datos a la base de datos

introducir la descripción de la imagen aquí

2 respuestas 2

0

creo que solo subes las imágenes y no su descripción al enviarlo a la db

const objeto = {
    imagen1:{
        descripcion: "imagen1",
        imagen:images[0]
    },
    imagen2:{
        descripcion: "imagen2",
        imagen:images[1]   
    }
}
0

Está fue la solución que encontré para mi problema, espero que si alguien se topa con lo mismo le pueda ser de ayuda.

const submitFinanciado = async (e) => {
    try {
      e.preventDefault(); 

      await upload();    

      const tabla = "datos";
      let res = await axios.post(
        `http://localhost:${portServer}/createGeneral/${tabla}`,
        {
          nombre: nombre,
          apellido: apellido,                  
          image1: images[0],
          image2: images[1],          
        }
      );
      Swal.fire(res.data.err ? res.data.err : res.data.msg);      
      navigate("/home");
    } catch (error) {
      console.log(error);
    }
  };

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.