使用Angular5将图像和表单字段发送到API

ng new project-name

ng generate component form-component

<form (ngSubmit)="onSubmit()">
  <input type="text" name="name" [(ngModel)]="name" placeholder="Name">
  <input type="file" name="image" (change)="onFileSelected($event)">
  <button type="submit">Submit</button>
</form>

import { Component } from '@angular/core';

@Component({
  selector: 'app-form-component',
  templateUrl: './form-component.component.html',
  styleUrls: ['./form-component.component.css']
})
export class FormComponent {
  name: string;
  image: File;

  onSubmit() {
    // 处理表单提交逻辑
    // 发送图像和表单字段到API
  }

  onFileSelected(event) {
    this.image = event.target.files[0];
  }
}

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

onSubmit() {
  const formData = new FormData();
  formData.append('name', this.name);
  formData.append('image', this.image);

  this.http.post('api-url', formData).subscribe(response => {
    // 处理API响应
  });
}