如何将Http POST请求正文中的图像文件与其他表单数据angular 5一起发送。后端正在使用Laravel中的干预包

npm install @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/router@latest @angular/animations@latest --save

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  constructor(private http: HttpClient) {}

  onSubmit(file: File, formData: any) {
    const uploadData = new FormData();
    uploadData.append('file', file, file.name);
    uploadData.append('data', JSON.stringify(formData));

    this.http.post('your-backend-url', uploadData)
      .subscribe(response => {
        console.log(response);
      });
  }
}

<form (ngSubmit)="onSubmit(fileInput.files[0], formData)">
  <input type="file" #fileInput>
  <input type="text" [(ngModel)]="formData.name" name="name">
  <input type="email" [(ngModel)]="formData.email" name="email">
  <!-- 其他表单字段 -->

  <button type="submit">提交</button>
</form>

public function upload(Request $request)
{
    $file = $request->file('file');
    $data = json_decode($request->input('data'));

    // 处理图像文件和其他表单数据

    return response()->json(['success' => true]);
}