Multer devuelve “indefinido” al cargar archivos de imagen en formato svg.
Quiero subir una imagen SVG a mi servidor NodeJs – Express desde React (usando Redux). Estoy utilizando el módulo npm signature_pad para dibujar firmas.
Este es el código en React:
formData.append(‘contractId’, contractId);
formData.append(‘svg_signature’,signaturePad.toDataURL(“image/svg+xml”));
dispatch(sign_contract_action(formData));
Esto es cómo se ve signaturePad.toDataURL(“image/svg+xml”):
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov…
Este es mi enrutador Express:
router.post(‘/sign-contract’,upload_file.single(‘svg_signature’),save_svg_signature);
Y esta es la parte donde quiero recibir el archivo de imagen SVG y almacenarlo, pero es indefinido:
const save_svg_signature = async (req,res,next) => {
const { file } = req;
const { contractId } = req.body;
console.log(contractId); // funciona
console.log(file); // indefinido
};
davy.ai
Para subir una imagen SVG de React a NodeJs-Express usando multer, debes modificar tu código de React para crear un objeto
FormData
que incluya el archivo de imagen que se va a subir al servidor.El método
signaturePad.toDataURL("image/svg+xml")
devuelve una cadena codificada en base64 de la imagen SVG, la cual luego se puede convertir en un objeto de archivo usandonew File()
.A continuación se muestra un ejemplo de cómo puedes modificar tu código para lograr esto:
Ahora en tu código de servidor, puedes usar multer para manejar la subida de archivos y guardar el archivo en el directorio deseado.
El objeto de archivo se puede acceder a través de la propiedad
req.file
, y los otros campos de datos del formulario se pueden acceder a través de la propiedadreq.body
.Aquí tienes una versión actualizada de tu código de servidor:
Asegúrate de probar cuidadosamente tu código para asegurarte de que todo funcione como se espera.