Image manipulation with nodejs and Ionic

Question

I have an Ionic application, in it I have to send an image converted to Base64 for an api, and the api for the database. I was getting error by the size of the payload, I found on the internet about using JSON.stringfy, apparently worked, however, I can not receive in the API and store in the database. Follows the codes used:

To perform the conversion :

getPhoto() {
    let options = {
      maximumImagesCount: 1
    };
    this.imagePicker.getPictures(options).then((results) => {
      for (var i = 0; i < results.length; i++) {
          this.imgPreview = results[i];
          this.base64.encodeFile(results[i]).then((base64File: string) => {
            this.regData.avatar = base64File;
            this.novoCredenciadoModel.caminho = this.regData.avatar;
          }, (err) => {
            console.log(err);
          });
      }
    }, (err) => { });
  }

To send to the past:

register() {
    this.novoCredenciadoService.enviar(this.novoCredenciadoModel).subscribe((result) => {
      // this.loading.dismiss();
      let alert = this.alertCtrl.create({
        title: 'Registration Successful',
        subTitle: 'Great! Your registration is success',
        buttons: ['OK']
      });
      alert.present();
    }, (err) => {
      console.log(err);
      // this.loading.dismiss();
      let alert = this.alertCtrl.create({
        title: 'Registration Failed',
        subTitle: 'Oh no! Your registration is failed',
        buttons: ['OK']
      });
      alert.present();
    });
  }

And in the past:

return this.http.post(Constants.CAMINHO_TESTE+api,JSON.stringify(corpoRequisicao))
    .pipe(map((resp: Response) =>{
      console.log(JSON.stringify(corpoRequisicao));
      console.log("post/response");
      console.log (resp);
      }));

In the API, the following, to receive the data:

var received = JSON.stringify(req);

var nome = received.nome;
var email = received.email;
var telefone = received.telefone;
var endereco = received.endereco;
var cnpj = received.cnpj;
var categoria = received.categoria;
var caminho = received.caminho; //caminho seria a img em base64

But I get the following error:

Syntaxerror: Unexpected token P in JSON at position 0

Some way to perform such a function?

Edit:

 handler: () => {
            this.http.post("minharota/api/novo", JSON.stringify(postData), requestOptions)
              .subscribe(data => {

Postdata is the data that comes from the form, which I think are correct because when loguei was normal.

Answer 1

1. You need to move the image to an independent upload endpoint via your api. Ex.: POST /api/uploadimage .

2. The necessary key in your header for the request:

   • Content-Type: application/x-www-form-urlencoded
   • Body: a parameter with some name (example: image) and its value would be the image in Base64

3. On your route in the Node API: (there are other ways to do this, many even more elegant)

   var imageEncoding = req.body.image.replace(/ /g, "+");
   

   Variable imageEncoding can be saved in a varchar field, string, etc.

4. Don’t forget to set up your api to receive content via larger request, if that’s your case.

   Example with Node and Express:

   app.use(bodyParser.urlencoded({extended: true, limit: '50mb'}));
   app.use(bodyParser.json({limit: '50mb'}));
   

5. If you don’t use any tools for communication tests with Rest Apis, I suggest you use some (the community uses Postman a lot), because they are more minimalist and make you gain time with these tests.

I hope I’ve helped.