2

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'
        });
    }
});
1
  • 3
    Ten en cuenta que el tercer parámetro del método POST tiene que ver generalmente con la configuración de encabezados. Tú estas tratando de pasar como 3er parámetro un objeto con propiedades. Recuerda que toda la data que deseas enviar hacia un servicio debe estar contenida como segundo parámetro Commented el 26 ago. 2021 a las 3:50

1 respuesta 1

1

Como dice Paulo Urbano y la documentación oficial de axios,los datos deben ser el segundo parámetro.

        await axios.post('http://localhost:4000/', {
        form_data: form_data,
        image_name: image_name,
        description: image_description
        })

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.