Как загрузить форму, содержащую изображение и другие данные для отправки в Angular и Nodejs и Mongodb? - PullRequest
0 голосов
/ 09 апреля 2019

Я хочу загрузить форму, содержащую различные поля данных и изображение в угловом формате с помощью одной кнопки отправки.

            <form #edit="ngForm" (submit)="editProfile(edit.value)">
                <fieldset>
                    <div class="form-group font-weight-bold">
                        <label for="username">Profile pic : </label>
                        <input type="file" (change)="onSelectedFile($event)">
                    </div>
                    <div class="form-group font-weight-bold">
                        <label for="email">Email </label>
                        <input type="text" name="edit_email" class="form-control font-weight-light" id="email" [(ngModel)]="edit_email" value={{user.email}}>
                    </div>                       
                    <button type="submit" class="btn btn-primary font-weight-light">Submit</button>
                </fieldset>
            </form>

События в файле .ts

onSelectedFile(event){
   let image = event.target.files[0];
   console.log("Profle Pircture");
   console.log(image);
   this.edit_image=image;

}

  editProfile(e){

     const user={
      email:this.edit_email,
      img:this.edit_image,
  }

  this._authService.editProfile(user)
      .subscribe(data=>{
        this.dataFromService=data;
        this.user=this.dataFromService.user;
        console.log(data);
      })
 }

Сервисный файл

editProfile(user){
  let headers = new HttpHeaders();

  headers=headers.append('content-type','application/json');
  console.log("Updating Profile");
  console.log(user);
  return this.http.post('http://localhost:8080/profile/edit_Profile',user,{headers:headers})
}

Поле изображения на стороне сервера пустое.Я пытался использовать multer, но я не могу использовать его внутри формы с другими полями и загрузить все вместе

...