Ionic form submit with image

Ionic Framework ionic-v3
1

I have a form with some param and image,
The html code is

       <form [formGroup]="registerForm" (submit)="doRegister()">
            <img name="userImg" (tap)="openGallery()" [hidden]="!imgSelected" [src]="imageSrc" style="width:60px; height:60px;"/>
            <br/>
            <ion-item style="border:1px solid #CCCCCC; border-radius:0px;">
              <ion-input [(ngModel)]="registerData.email" name="email" type="text" formControlName="email" placeholder="{{ 'Login.email' | translate }}"></ion-input>
             </ion-item>
            <ion-item style="border:1px solid #CCCCCC; border-radius:0px;">
              <ion-input [(ngModel)]="registerData.password" name="password" type="text" formControlName="password" placeholder="{{ 'Login.password' | translate }}"></ion-input>
             </ion-item>
       </form>

and my calling api code is:

let opt: RequestOptions;
let myHeaders: Headers = new Headers;

myHeaders.set('Accept', 'application/json; charset=utf-8');
myHeaders.append('Content-type', 'application/json; charset=utf-8');
opt = new RequestOptions({
  headers: myHeaders
})
return new Promise((resolve, reject) => {
console.log(apiUrl);
  this.http.post(apiUrl+'register?email='+email+'&password='+password+'&userImg='+userImg, opt)
  .map(res => res.json())
  .subscribe(data => {
    this.data = data;
    resolve(this.data);
  },(err) => {
   reject(err);
  });
});

I want to ask how can I send the image with the api to the server, thanks a lot~

2

In ionic you cannot simultaneously send images and data to the server. Send image to server using file transfer in ionic and then submit remaining data once the file is successfully transferred

3

I disagree with the previous post. It is perfectly possible to send both things at once, but OP is lying to the server by declaring one content type and yet sending another. I do not know which is the correct expected content type, but one must be consistent. The way the request is being constructed is also problematic. If it is supposed to be JSON, let Http stringify it. If it is supposed to be x-www-form-urlencoded, then use the URLSearchParams helper class. Either way, I do not believe explicit content type declaration is needed. I am positive it isn’t for JSON.