1

Mi componente "Gallery" tiene un array de archivos (photos) como estado, el cual envío a través de axios. Los datos llegan y los puedo guardar en el servidor satisfactoriamente, pero mi duda está en el código, ya que mapeo el estado y creo un nuevo FormData para cada elemento del array, y los envío uno por uno utilizando un axios.post() para cada item. Quisiera saber si hay una forma de poder enviar directamente ese array, utilizando un sólo axios.post(). Mi código es el siguiente:

En React:

try {
    this.state.photos.map( async onePhoto => { //Mapeo el array de fotos
        var formData = new FormData();         //Creo un nuevo FormData por cada foto encontrada
        formData.append('photo', onePhoto);
        await axios.post(this.URI, formData);  //Un post por cada fotografía, no sé si es correcto
    })
    this.setState({
        photos: []                             //Seteo el estado al finalizar
    })
}catch (error) {
    console.log(error);
}

En express: (creo que es irrelevante, ya que mi duda está en el frontend, pero por las dudas lo muestro)

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, path.join(__dirname, '/public/uploads'))
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + path.extname(file.originalname));
    }
});
app.use(multer({storage}).single('photo'));  //como ven, recibo las fotos una por una
//  app.use(multer({storage}).array('photos', 20)); //Está comentado porque no sé cómo enviar el array entero
2
  • Y si editas un poco tu funcion flecha: async () = onePhoto =>
    – Shassain
    Commented el 29 mar. 2020 a las 14:17
  • Me tira error de compilación. ¿De igual forma no sería const myFunction = async (parameters) =>{} y luego llamarla dentro del map pasándole el item? Commented el 29 mar. 2020 a las 20:17

2 respuestas 2

0

Le estás pasando a multer el archivo a través del método single, eso no te permite gestionar varios archivos a la vez. Sin embargo, multer te permite recibir una lista de archivos a través del método array.

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
})

En la parte front lo que haría sería pasarle directamente this.state.photos

var formData = new FormData();         
formData.append('photos', this.state.photos);
await axios.post(this.URI, formData); 
8
  • Exactamente eso ya hice: en el back utilicé el upload.array('photos', 20) y desde el front formData.append('photos', this.state.photos) y await axios.post(this.URI, formData) pero no me deja enviar el estado completo desde el axios.post. Voy a hacerlo de vuelta y te paso el error. Commented el 29 mar. 2020 a las 19:21
  • Comprueba no haya algún límite de tamaño de archivo u otra configuración que pudiera interferir. Commented el 29 mar. 2020 a las 19:23
  • Me corrijo, no surge ningún error :( Envío el formData.append('photos', this.state.photos) desde el front, el back incluso me responde con un 200, pero las fotos no se guardan. Si las envío de a una utilizando upload.single('photos') sí se guardan. Haciendo las pruebas en insomnia sí puedo guardar las fotos, el problema está en el front. ¿Se puede en verdad hacer un FormData('array' myArray)? Commented el 29 mar. 2020 a las 20:07
  • por supuesto. te llega un array[] de archivos multer.array (doc) Commented el 29 mar. 2020 a las 20:41
  • De cualquier forma que lo haga, ya sea axios.post(this.URI, formData) o axios.post(this.URI, this.state.photos) el servidor recibe un array vacío. ¿Por qué será? Commented el 29 mar. 2020 a las 21:20
0

para que el formData tome las imágenes que se encuentren en un array y los convierta en binarios se necesita recorrer el array que contiene las imagenes e ir llenando el formData con la imagen y el nombre

React:

let formData = new FormData();
for (const e of files) { 
   formData.append('photos', e, e.name);
}

Nodejs: Podes recibirlo como un campo que puede contener otros campos que no sean files o bien solamente el array de images como el código que esta comentado

app.use(multer({storage}).fields([{name: 'photos', maxCount:20}, {name: "title"}]));

// app.use(multer({storage}).array('photos', 20)); //Está comentado porque no sé cómo enviar el array entero

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.