Я хочу загрузить форму, содержащую различные поля данных и изображение в угловом формате с помощью одной кнопки отправки.
<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, но я не могу использовать его внутри формы с другими полями и загрузить все вместе