Quiero subir varias imágenes a mi servidor nodejs que tienen información adicional como titulo y categoría, traté enviando las imagenes en DataUrl pero debido a las limitaciones de POST no me permite cargar mas de 2 imágenes por vez.
Para cargar las imágenes utilizo este componente de reactjs Componente para cargar imágenes que tiene el método handleSubmitImages para enviar el estado del componente al servidor mediante ajax.
handleSubmitImages()
handleSubmitImages(){
let xhr = new XMLHttpRequest()
let json = JSON.stringify({images: this.state.images})
xhr.open("POST",'new',true)
xhr.setRequestHeader("Content-Type","application/json")
xhr.send(json)
}
Estado del componente
El estado el componente esta formado por un array de objetos json que contienen la información de las imágenes así:
[
{ title: 'Imagen 264',
file: [Blob], // Este es el blob del archivo
data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA', //Imagen en base64
category: 1 }
]
En el servidor tengo la ruta wallpapers/new para subir imágenes mediante el método POST.
Ruta wallpapers/new
router.route("/new")
.get(function(req,res){
res.render('wallpaper/new',{
user: req.user
})
})
.post(function(req, res) {
let images = req.body.images
images.map(image => {
// Aquí debería poder guardar la imagen en mi servidor
})
});
NOTA: He leído tutoriales que hacen uso de formidable y FormData() para subir varias imágenes a la vez pero en ninguno de ellos envían información adicional como el titulo de la imagen o algo similar. Espero que puedan ayudarme.
post
?