使用Angular绑定图像输入

Question

我目前正致力于一个Ionic项目，其中用户注册并上传个人资料图片，并将其保存到BackendLess数据库。我无法弄清楚如何使用绑定获取图像数据。我已经使用单向绑定图像ID。但它似乎仍然没有奏效。这是我的代码：

HTML code：

<ion-list>

<ion-item>
  <ion-label floating>Name</ion-label>
  <ion-input type="text" [(ngModel)]="name"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Email</ion-label>
  <ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Password</ion-label>
  <ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Phone Number</ion-label>
  <ion-input type="text" [(ngModel)]="phone"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Profile Picture</ion-label>
  <ion-input type="file" [id]="pic"></ion-input>
</ion-item>

</ion-list>

TS代码：

export class Register {

 public name: string;
 public email: string;
 public password: string;
 public phone: string;
 public pic: any;

 constructor(public navCtrl: NavController, private alertCtrl: AlertController) {
 }

 ionViewDidLoad() {
console.log('ionViewDidLoad Register');
 }

 userreg()  {
  var picURL;
  var user = new Backendless.User();
      user.email=this.email;
      user.password=this.password;
      user.name=this.name;
      user.phone=this.phone;
  var picture=this.pic;

  Backendless.Files.upload( picture, "my-folder" )
        .then( function( fileURL ) {
           console.log( "File successfully uploaded. Path to download: " + fileURL.fileURL );
           picURL = fileURL.fileURL;
         })
        .catch( function( error ) {
           console.log( "error - " + error.message );
         })
  user.picture=picURL;

  Backendless.UserService.register( user ).then( this.userRegistered ).catch( this.gotError );
}

gotError( err ) // see more on error handling
    {
  console.log( "error message - " + err.message );
      console.log( "error code - " + err.statusCode );
    }

userRegistered( user )
    {
  console.log("User registered");
  alert("User Registered.")
}

}