Ionic3表单提交图像

时间:2017-08-01 04:44:58

标签: ionic-framework

我有一张带有一些参数和图像的表格, HTML代码是

   <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>

我的主叫api代码是:

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

我想问一下如何将带有api的图像发送到服务器,非常感谢〜

1 个答案:

答案 0 :(得分:0)

我认为最简单的方法是将图像作为base64编码的字符串 - DestinationType.DATA_URL发送到您的服务器。下面是我编写的一种方法示例,用于将表单数据发送到服务器,包括图像,作为邮件正文中的JSON:

public sendForm(form: any): Observable<any> {
let body = JSON.stringify(form)
let params = new URLSearchParams();
let options = new RequestOptions({ headers: this.HEADERS, search: params });
return this.http.post(this.URL, body, options)
  .map(res => res.json())
  .catch(this.handleError)
  .timeout(this.TIMEOUT);

}