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