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
async () = onePhoto =>
const myFunction = async (parameters) =>{}
y luego llamarla dentro del map pasándole el item?