How to upload images to nodejs

Question

How to upload images to nodejs

Navigation

#1 by (1 votes)

0

I want to upload several images to my server nodejs that have additional information such as title and category , I tried sending the images in DataUrl but due to The limitations of POST does not allow me to upload more than 2 images at a time.

To load the images I use this reagent component Component to load images that has the method handleSubmitImages to send the status of the component to the server using 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)
}

Component status

The state of the component is formed by an array of json objects that contain the information of the images as follows:

[ 
 { title: 'Imagen 264',
  file: [Blob], // Este es el blob del archivo
  data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA', //Imagen en base64
  category: 1 } 
]

On the server I have the route wallpapers / new to upload images using the POST method.

Route 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
    })
  });

NOTE: I've read tutorials that use formidable and FormData () to upload multiple images at once but none of them They send additional information such as the title of the image or something similar. I hope you can help me.

javascript ecmascript-2015 nodejs reactjs

asked by Edwin V 14.05.2017 в 22:55

source

1 answer

Compiler at Cobol Fingerprint reader

score 1 · Accepted Answer

It is not necessary to send the image twice, I recommend that you only send the data url and forget to send Blob, you can not serialize it in a json, if you choose this path, (as far as you can) you can only use FromData which is a alternative method .

To send multiple images, you can solve it very easily by moving the loop next to the client. Thus, the server transfer limit will be applied to each image ( minus ~ 1/3 overhead ) and not to all the collection of images. In addition, you make better use of the bandwidth by sending several images at the same time.

handleSubmitImages(){
  // el loop lo haces aqui.
  this.state.images.forEach((image) => {
    let xhr = new XMLHttpRequest()
    let json = JSON.stringify({image})
    xhr.open("POST",'new',true)
    xhr.setRequestHeader("Content-Type","application/json")
    xhr.send(json)

    // TODO: manejar los errores de transferencia (retry policy/notification)
  }
}

Then on server side you only receive the files one by one:

const fs = require('fs');

...

.post(function(req, res) {
    let image = req.body.image

    // luego extraes la cabecera del data url
    var base64Data = image.data.replace(/^data:image\/jpeg;base64,/, "");

    // grabas la imagen el disco
    fs.writeFile('nombredearchivo.jpg', base64Data, 'base64', function(err) {
        console.log(err);
    });

    console.log(image.title); // Imagen 264
});