javascript — отправка формы Angular 7 не будет работать с файлами

Отправка формы Angular 7 не будет работать с файлами

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

Я пробовал много способов сделать это, но не смог заставить его работать

Я создал модель User :

 export class User { public title: string; public name: string; public age: string; public userFile: any; } 

В пользовательском компоненте user.component.ts я объявил переменную модели пользователя и метод submit:

 model = new User();//user model object 

В методе отправки я установил тип контента на » и отправил данные.

 submit(){ console.log(this.model); const headers = new HttpHeaders().set('Content-Type', ''); this.http.post('.../users/create', this.model, {headers}).subscribe(res ={amp}gt; { console.log("successs "   data); }, err ={amp}gt; { console.log("error"   err) }); } 

И HTML:

  {amp}lt;form (submit)="submit()"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="title"{amp}gt;UserId{amp}lt;/label{amp}gt; {amp}lt;input type="text" class="form-control" id="title" required [(ngModel)]="model.title" name="title"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="author"{amp}gt;User Name{amp}lt;/label{amp}gt; {amp}lt;input type="text" class="form-control" id="author" required [(ngModel)]="model.name" name="author"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="file" id="userFile" #userFile="ngModel" [(ngModel)]="model.userFile"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;button type="submit" class="btn btn-default"{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; 

Когда я отправляю форму, я получаю сообщение об ошибке:

 422 Unprocessable Entity 

В элементе проверки я вижу, что запрос тела был:

 { "title": "lorem", "name": "Test", "age": "35", "userFile": "C:\fakepath\testimage.png" } 

Может кто-то помочь мне, пожалуйста?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector