Php 如何随ng2文件上传一起提交输入数据

请我想发送一些文本数据与文件上传（ng2文件上传）在美国。我也不熟悉棱角和离子。我尝试了很多选择，但似乎没有找到出路。我使用Php作为后端。我只能发送文件，不能发送用户名等输入数据。同时，我能够在控制台上记录用户名为的输入数据，但服务器响应为空。而且它从不插入我的数据库。这是我的密码

public fileUploader: FileUploader = new FileUploader({});

ngOnInit() {
    this.fileUploader = new FileUploader({ url: "http://localhost/paat/server/post.php"});
 
    this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
        form.append('body', this.body);
        form.append('username', this.username);

        // Add file to upload
        form.append('file', fileItem);

        fileItem.withCredentials = false;
        return { fileItem, form };
    };
}

fileOverBase(event): void {
    this.hasBaseDropZoneOver = event;
}

//return files from ng2 upload 
getFiles(): FileLikeObject[] {
    return this.fileUploader.queue.map((fileItem) => {
      return fileItem.file;
    });
}

// the upload method where the post to server is made
uploadFiles() {
    let bodys = {
      body:this.body,
      username:this.username,
    };
    let files = this.getFiles();
    let requests = [];
    
    files.forEach((file) => {
        let formData = new FormData();
        formData.append('file' , file.rawFile, file.name);
        formData.append('body' , this.body);
        formData.append('username' , this.username);
        requests.push(this.uploadingService.uploadFormData(formData));
    });

    concat(...requests).subscribe(
        (res) => {
            console.log(res);
            console.log(this.body);
            console.log(this.username);
            console.log(this.file.name);
        },
        (err) => {  
            console.log(err);
        }
    );
}

这是我的上传服务

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

@Injectable({
    providedIn: 'root'
})
export class UploadingService {

  API_SERVER: string = "http://localhost/paat/server/post.php";
  
  constructor(private http: HttpClient) { }

    public uploadFormData(formData) {
        return this.http.post<any>(`${this.API_SERVER}`, formData);
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
@注射的({
providedIn:'根'
})
导出类上载服务{
API_服务器：字符串=”http://localhost/paat/server/post.php";
构造函数（私有http:HttpClient）{}
公共上传formData（formData）{
返回this.http.post（`this.API_SERVER}`，formData）；
}
}

这是我的后端代码：

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods:POST,GET,PUT,DELETE");
header("Access-Control-Max-Age:86400");
header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Headers,Authorization,X-Requested-With");

$con = mysqli_connect("localhost", "root", "", "social");
$postjson = json_decode(file_get_contents('php://input'), true);

$filename = $_FILES['file']['name'];
$meta = $_POST;
$targetDir = "assets/images/posts/";
$destination = $targetDir . $filename;
move_uploaded_file( $_FILES['file']['tmp_name'] , $destination );

$body = $postjson['body'];
  
$date_added = date("Y-m-d H:i:s");

//get username
$added_by = $postjson['username'];

//if user is on own profile, user_to is 'none'
$targetfile = $destination;
    
$user_to ="none";

$query = mysqli_query($con,"INSERT INTO posts VALUES(NULL, '$body', '$added_by', '$user_to', '$date_added', 'no', 'no', '0', '$targetfile')");

---

我已经发现我做错了什么。问题在于我的后端代码。这是我从请求中检索formdata值的方式。所以我改变了

$body = $postjson['body'];
$added_by = $postjson['username'];


到

此外，我还将我的ngOnInit（）方法和fileuploader方法的实例修改为

public fileUploader: FileUploader = new FileUploader({ url: "http://localhost/paat/server/post.php"});

ngOnInit() {
   
    
    this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
      
      form.append('body', this.body);

      // Add file to upload
      form.append('file', fileItem);
      form.append('username', this.username);

    
      fileItem.withCredentials = false;
      return { fileItem, form };
    };
}


现在它可以工作了

public fileUploader: FileUploader = new FileUploader({ url: "http://localhost/paat/server/post.php"});

ngOnInit() {
   
    
    this.fileUploader.onBuildItemForm = (fileItem: any, form: FormData): any => {
      
      form.append('body', this.body);

      // Add file to upload
      form.append('file', fileItem);
      form.append('username', this.username);

    
      fileItem.withCredentials = false;
      return { fileItem, form };
    };
}