Estoy creando una app de imágenes en la cual utilizo react js, mongo db y axios para las peticiones, me gustaría saber cómo enviar más de un parámetro, debido a que, intento realizarlo, pero sucede lo siguiente, la variable form_data envía un archivo, y posterirmente en un objeto se envía el nombre de la imagen y la descripción; pero al realizar la petición lo único que se envía es la imagen, es decir "form_data", y aunque llene los campos del formulario para "image_name" y "description", no se envían y me arroja el error de "Missing data", es decir que falta información.
Mi código es el siguiente:
const Form = () => {
const [image_name, set_image_name] = useState();
const [image_description, set_image_description] = useState();
const [form_data, set_form_data] = useState();
const send_image = (files) => {
const formData = new FormData();
formData.append('file', files)
set_form_data(formData)
console.log(formData)
}
const handleSubmit = async (e) => {
e.preventDefault();
//Aquí es donde envío los datos form_data y el objeto
await axios.post('http://localhost:4000/', form_data, {
image_name: image_name,
description: image_description
})
}
const handleChange = (e) => {
switch (e.target.name) {
case 'image_name':
set_image_name(e.target.value)
break;
case 'image_description':
set_image_description(e.target.value)
break;
default:
break;
}
}
return (
<Container>
<form onSubmit={handleSubmit}>
<input
type="text"
name="image_name"
value={image_name}
onChange={handleChange}
placeholder="Image Name"
autoComplete="off"
/>
<input
type="text"
name="image_description"
value={image_description}
onChange={handleChange}
placeholder="Image Description"
autoComplete="off"
/>
<input
type="file"
id="image_file"
onChange={(e) => {
send_image(e.target.files[0])
}}
/>
<label htmlFor="image_file">
<span>Select Image</span>
</label>
<button>Save Image</button>
</form>
</Container>
);
}
export default Form;
Y este es el código en node js:
router.post('/', async (req, res, next) => {
const {image_name, description} = req.body;
// Save de image in a local directory
const newPath = './files/';
const file = req.files.file;
const filename = file.name;
file.mv(`${newPath}${filename}`)
const image_route = `${newPath}${filename}`
console.log(image_route)
// Save de image in cloudinary
const result = await cloudinary.uploader.upload(image_route)
//Delete the image in the local directory
fs.unlink(image_route)
// Pese a que envío image_name y description, no se guarda la información y me arroja el error
if (!image_name || !description) {
next(createError(400, 'Error saving image. Missing data'))
} else if (image_name && description) {
try {
const image = new Image({image_name, description, url_image: result.url, public_id: result.public_id})
await image.save()
} catch (ex) {
next(createError(400, 'Error to save image. Missing data'))
}
res.json({
message: 'The image has been saved successfully'
});
}
});