Problems when uploading image to the server


#1

I have a problem when trying to upload an image to the server by the post method, if I do it from the postman if it goes up (I mean the server-side code if it works), but if I do it from my service it goes to point 3 of the console .log
Could someone tell me what’s wrong, thanks

// Cotroller
abrirCamara() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.imagenBase64 = ‘data:image/jpeg;base64,’ + imageData;
}, (err) => {

});

}

abrirCarrete() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData) => {
this.imagenBase64 = ‘data:image/jpeg;base64,’ + imageData;
}, (err) => {

});

}

subirImage() {

if (this.logProv.token === "" || this.logProv.token === null || this.logProv.token === undefined) {
  this.token = this.regProv.token;
 }
 else {
  this.token = this.logProv.token;
 }
 console.log( "punto 4, envío los datos" );
 console.log( "Enviando..." );
 console.log( this.imagenBase64 );
 console.log( this.token );
 this.regProv.SubirFoto(this.imagenBase64, this.token);

// let url = URL_SERVICIOS + “/registro/actualizarFoto/”;
//let posData = new FormData();
// posData.append(this.token, this.imagenBase64);
//let data:Observable = this.http.post(url, posData);
// data.subscribe((result) => {
// console.log(result);
// });
}

//services

public SubirFoto (imagen:any, token:string) {
let headers = new Headers({ ‘Content-type’: ‘application/x-www-form-urlencoded’ });
console.log( “punto 1 registro” )

let data = new URLSearchParams();
data.append(“imagen”, imagen);
data.append(“token”, token);

console.log( “punto 2 registro” )
console.log( imagen )
console.log( token )

let url = URL_SERVICIOS + “registro/actualizarFoto”;
console.log( “punto 3 registro” )

return this.http.post(url, { imagen, token} )
.map( resp=> {

                if( resp['error'] ) {

                  this.alertCtrl.create({// creo la alerta
                    title:"Error en sus datos",
                    subTitle: resp['mensaje'],
                    buttons: [ "OK" ]

                  }).present();
                  console.log( "punto 4 registro" )
                }
                else {
                  this.alertCtrl.create({// creo la alerta
                    title:"Dirección agregada",
                    subTitle: "De forma exitosa",
                    buttons: [ "OK" ]

                  }).present();
                  this.fotoPerfil = resp['foto']
                  console.log( "punto 5 registro" )
                  console.log( this.fotoPerfil )
                }

              })

}


#2

When you post an issue you can use the ‘</>’ icon button to format your code:

type or paste code here

#3

</>
// Controller

abrirCamara() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
this.imagenBase64 = ‘data:image/jpeg;base64,’ + imageData;
}, (err) => {

});

}

abrirCarrete() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
}
this.camera.getPicture(options).then((imageData) => {
this.imagenBase64 = ‘data:image/jpeg;base64,’ + imageData;
}, (err) => {

});

}

subirImage() {

if (this.logProv.token === "" || this.logProv.token === null || this.logProv.token === undefined) {
  this.token = this.regProv.token;
 }
 else {
  this.token = this.logProv.token;
 }
 console.log( "punto 4, envío los datos" );
 console.log( "Enviando..." );
 console.log( this.imagenBase64 );
 console.log( this.token );
 this.regProv.SubirFoto(this.imagenBase64, this.token);

}

</>

</>
// Services
public SubirFoto (imagen:any, token:string) {
let headers = new Headers({ ‘Content-type’: ‘application/json’ });
console.log( “punto 1 registro” )

let data = new URLSearchParams();
data.append(“token”, token);
JSON.stringify(imagen)

console.log( “punto 2 registro” )
console.log( imagen )
console.log( token )
let url = URL_SERVICIOS + “registro/actualizarFoto”;
console.log( “punto 3 registro” )
console.log( JSON )

return this.http.post(url, { JSON, token} )
.map( resp=> {

                if( resp['error'] ) {

                  this.alertCtrl.create({// creo la alerta
                    title:"Error en sus datos",
                    subTitle: resp['mensaje'],
                    buttons: [ "OK" ]

                  }).present();
                  console.log( "punto 4 registro" )
                }
                else {
                  this.alertCtrl.create({// creo la alerta
                    title:"Dirección agregada",
                    subTitle: "De forma exitosa",
                    buttons: [ "OK" ]

                  }).present();
                  this.fotoPerfil = resp['foto']
                  console.log( "punto 5 registro" )
                  console.log( this.fotoPerfil )
                }

              })

}
</>

He does everything right up to the part of the service where he has to send the post, there he falls but he does not say anything to me, I do not know if it is because of the size of the image that I pass in base64, I do not know if I will have to pass it in a jSON


#4

I did what you told me but I hit it the same


#5

See: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet