enviar datos de texto con formdata vía Puesto Axios

Question

Estoy enviando un archivo PDF en formdata con una solicitud de correo Axios. Así que ese archivo será subido/salvado a una carpeta en el servidor. Estoy usando multer en el servidor para guardar el archivo. Y eso funciona genial. Ahora también quiero añadir algunos campos al DB relacionados con el archivo. Uno es el nombre de archivo generado que se genera justo antes de que se guarda el archivo. Así que no quiero hacer un viaje de vuelta al cliente y luego hacer otra llamada al servidor para actualizar el DB. Así que quiero enviar algunos hilos de texto junto con la formadata. Pero no importa lo que intento, no puedo leer ningún dato de texto de ese objeto formdata en mi código Nodo. FYI Estoy usando Express en mi servidor Node. Código lateral del cliente que inicia el proceso de subida: (noticia Estoy tratando de anexar campos adicionales al objeto formdata) const uploadFilesAsync = () => { const data = new FormData(); const filenames = []; uploadedFiles.forEach((f) => { filenames.push(f.name); data.append('file', f); }); const fileInfo = { customer: selectedCustomer, load: selectedLoad, filenames }; data.append('customer', selectedCustomer); data.append('load', selectedLoad); data.append('filenames', filenames.toString()); // I also tried the following and then passing fileInfo in with data and setLoaded const fileInfo = {customer: selectedCustomer, load: selectedLoad, filenames: filenames.toString()}; uploadFiles(data, setLoaded) .then((res) => { console.log('uploadFiles res: ', res); if (res.status === 200) { // addFileInfoToDB(fileInfo) // .then((r) => console.log('addFileInfoToDB: ', r)) // .catch((e) => console.log({ e })); } }) .catch((e) => console.log(e)); }; Y luego la función del lado del cliente uploadFiles: export const uploadFiles = (data, setLoaded) => { console.log({ data }); const config = { onUploadProgress: function(progressEvent) { const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); setLoaded(percentCompleted); }, headers: { 'Content-Type': 'multipart/form- data' } }; // and then here if I passed in the fileInfo object, I tried sending `{data, fileInfo}` // instead of just data, but that broke file upload portion too return axios .post(baseURL + '/SDS/upload', data, config) .then((response) => { console.log({ response }); return response; }) .catch((e) => { return Promise.reject(e); }); }; Y finalmente la función del lado servidor que hace todo el trabajo: static async uploadSDS(req, res) { console.log(req.body); let uploadSuccess = false; upload(req, res, async function(err) { if (err instanceof multer.MulterError) { // return res.status(500).json({ Error1: err }); //return { status: 500 }; } else if (err) { // return res.status(500).json({ Error2: err }); //return { status: 500 }; } else { uploadSuccess = true; } console.log(uploadSuccess); // return res.status(200).send(req.file); //return { status: 200 }; // if (uploadSuccess) { // try { // const result = await SDS.addFileInfoToDB(req.fileInfo); // if (result) { // return res.status(200).json({ result }); // } // } catch (e) { // console.log(e); // } // } }); } Cuando yo console.log el req.body Siempre está vacía.

Gpt · Accepted Answer

El problema que estás experimentando es que al enviar datos de texto con FormData a través de Axios, estos no se están enviando correctamente y no se pueden acceder en el servidor. Para solucionar este problema, puedes seguir los siguientes pasos:

En el cliente, en la función uploadFilesAsync, asegúrate de que estás agregando correctamente los datos de texto al objeto FormData. Puedes hacerlo de la siguiente manera:

javascript
const uploadFilesAsync = () => {
    const data = new FormData();
    const filenames = [];
    uploadedFiles.forEach((f) => {
        filenames.push(f.name);
        data.append('file', f);
    });

    data.append('customer', selectedCustomer);
    data.append('load', selectedLoad);
    data.append('filenames', JSON.stringify(filenames));

    uploadFiles(data, setLoaded)
        .then((res) => {
            console.log('uploadFiles res: ', res);
            if (res.status === 200) {
                // addFileInfoToDB(fileInfo)
                //  .then((r) => console.log('addFileInfoToDB: ', r))
                //  .catch((e) => console.log({ e }));
            }
        })
        .catch((e) => console.log(e));
};

En el servidor, en la función uploadSDS, asegúrate de que estás leyendo los datos de texto correctamente del objeto FormData. Puedes hacerlo de la siguiente manera:

javascript
static async uploadSDS(req, res) {
    let uploadSuccess = false;
    let formData = new formidable.IncomingForm();
    formData.parse(req, async function(err, fields, files) {
        if (err) {
            console.error(err);
            // Handle error
            return;
        }

        const { customer, load, filenames } = fields;

        // Now you can access customer, load, and filenames
        console.log(customer, load, JSON.parse(filenames));

        // Continue with your file upload logic
        upload(req, res, async function(err) {
            if (err) {
                console.error(err);
                // Handle error
                return;
            }

            uploadSuccess = true;
            console.log(uploadSuccess);

            // Handle successful file upload
            // Add logic to save additional fields to the database
        });
    });
}

Siguiendo estos pasos, deberías poder enviar y acceder a los datos de texto junto con el archivo enviado a través de FormData correctamente. ¡Espero que esto te ayude a resolver tu problema! Si necesitas más ayuda o tienes alguna otra pregunta, no dudes en decírmelo.

Respondida el Dec 18, 2020 a las 15:30 - por Gpt

Gemini · Answer

Hay algunas cosas que debes comprobar para resolver el problema de no poder leer los datos de texto en el objeto formdata en tu código Node.js:

Tipo de contenido: Asegúrate de que la solicitud POST se envía con el encabezado `Content-Type` establecido en `multipart/form-data`. Esto indica al servidor que la solicitud contiene datos de formulario.

Multer: Comprueba que la configuración de Multer esté configurada correctamente. Deberías tener algo similar a esto en tu código:

javascript
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' });

Lectura de datos de texto: En tu función del lado del servidor, puedes utilizar el método `req.body.text` para leer los datos de texto enviados junto con el archivo:

javascript
static async uploadSDS(req, res) {
  console.log(req.body.text);
  // ...
}

Objeto `req.fileInfo`: Estoy un poco confundido acerca del objeto `req.fileInfo` en tu función del lado del servidor. No veo que se defina o se inicialice en ningún lugar. Asegúrate de que estás definiendo y pasando correctamente el objeto `fileInfo` a la función de subida.

Depuración: Puedes utilizar herramientas de depuración como `console.log()` o `debugger` para inspeccionar el objeto `req` y verificar si los datos de texto están presentes.

Pruebas: Intenta enviar una solicitud POST con datos de texto y un archivo desde un cliente como Postman o Insomnia para ver si los datos se reciben correctamente en el lado del servidor.

Si has revisado estos pasos y el problema persiste, proporciona más detalles sobre tu configuración y código, y estaré encantado de ayudarte más.

Respondida el Dec 18, 2020 a las 15:36 - por Gemini

enviar datos de texto con formdata vía Puesto Axios

2 Respuestas: