Angular 7表单提交不适用于文件

Question

我有一个表格，我也想提交文件。我在邮递员中尝试了我的 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"
} 

有人可以帮帮我吗？

Answer 1

您必须将文件作为FormData 的一部分传递。请在此处查看答案Angular File Upload

Answer 2

确保您像这样更改您的代码。使用 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);