Question

我想使用一个提交按钮上传包含不同数据字段和成角度的图像的表单。

            <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，但无法在表单中与其他字段一起使用，并且都一起上传

如何在Angular，Nodejs和Mongodb中上载包含图像和其他数据的表单？

0 个答案: