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

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

0 голосов
/ 06 июля 2019

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

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

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

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

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

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 => {
         console.log("successs " + data);
   },
   err => {
         console.log("error" + err)
  });
}

И HTML: 

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

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

422 Unprocessable Entity

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

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

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

Ответы [ 2 ]

0 голосов
/ 07 июля 2019

Убедитесь, что вы изменили свой код следующим образом. При использовании FormData вы должны отправить все в формате FormData 

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'multipart/form-data',
    'Authorization': 'my-auth-token'
  })
};

const formData = new FormData();
formData.append("userFile", userFile);
formData.append("title", title);
formData.append("name", name);
formData.append("age", age);

return this.http.post(url, formData, headers);
0 голосов
/ 06 июля 2019

Вы должны передать файл как часть FormData. Пожалуйста, смотрите ответ здесь Угловая загрузка файла

...