Question

我有一个表格，我也想提交文件。我在邮递员中尝试了我的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方法中，我确实将内容类型设置为''并提交了数据。

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

在inspect元素中，我看到主体请求是：

{
    "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);

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

2 个答案: