如何在Ionic中用HttpClient和FormData传文件到PHP及PHP接收

一、Ionic 前端代码修正 #

1. 模板文件（mypage.html） #

移除文件输入框的无用[(ngModel)]，优化交互提示：

<ion-header>
  <ion-toolbar>
    <ion-title>Send Data</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card class="ion-align-items-center">
    <ion-card-header>
      <ion-card-subtitle>Send Data</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <input type="text" [(ngModel)]="name1" placeholder="输入文件名">
      <input type="file" (change)="selectedFile($event)">
      <button (click)="OnClick()">Send</button>
    </ion-card-content>
  </ion-card>
</ion-content>

2. 组件文件（mypage.page.ts） #

• 移除JSON.stringify(formdata)，直接传递FormData对象（这是核心错误修正）
• 给文件和文本字段设置不同键名，避免覆盖
• 添加文件选择校验：

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  name1: any = '';
  fle1: File | null = null;

  constructor(private http: HttpClient) { }

  selectedFile(event: any) {
    this.fle1 = event.target.files[0];
  }

  OnClick() {
    if (!this.fle1) {
      console.log('请先选择文件');
      return;
    }

    const formdata = new FormData();
    formdata.append("upload_file", this.fle1); // 文件字段名
    formdata.append("file_name", this.name1);  // 文本字段名

    // 直接传递FormData，Angular会自动处理请求头
    this.http.post('http://localhost:8080/ionic/api.php', formdata).subscribe((response: any) => {
      console.log(response);
    });
  }
}

3. 模块文件（app.module.ts） #

添加FormsModule（支持[(ngModel)]模板驱动表单）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    HttpClientModule,
    FormsModule, // 新增，支持ngModel
    ReactiveFormsModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

二、PHP 后端代码修正 #

• 移除Content-Type: application/json头（当前接收的是multipart/form-data类型）
• 通过$_FILES获取上传文件，$_POST获取文本字段
• 实现文件保存逻辑（需确保uploads目录存在且有写入权限）：

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Method: POST");
header("Access-Control-Max-Age: 86400");
header("Access-Control-Allow-Headers: Content-Type,Access-Control-Allow-Headers,Access-Control-Allow-Methods, Authorization, X-Requested-With");

$response = [];

// 检查文件上传状态
if (isset($_FILES['upload_file']) && $_FILES['upload_file']['error'] === UPLOAD_ERR_OK) {
    $uploaded_file = $_FILES['upload_file'];
    // 优先使用前端传入的文件名，否则用原文件名
    $target_name = $_POST['file_name'] ?? $uploaded_file['name'];
    $upload_dir = './uploads/';

    // 创建上传目录（如果不存在）
    if (!is_dir($upload_dir)) {
        mkdir($upload_dir, 0755, true);
    }

    $target_path = $upload_dir . basename($target_name);

    // 移动临时文件到目标目录
    if (move_uploaded_file($uploaded_file['tmp_name'], $target_path)) {
        $response['status'] = 'success';
        $response['message'] = '文件上传成功';
        $response['saved_path'] = $target_path;
        $response['received_file_name'] = $_POST['file_name'];
    } else {
        $response['status'] = 'error';
        $response['message'] = '文件保存失败，请检查目录权限';
    }
} else {
    $response['status'] = 'error';
    $response['message'] = '未选择文件或上传出错';
    if (isset($_FILES['upload_file'])) {
        $response['error_code'] = $_FILES['upload_file']['error'];
    }
}

echo json_encode($response);
?>

关键问题说明 #

1. 前端核心错误：原代码将FormData转为JSON发送，会丢失文件二进制数据，必须直接传递FormData对象，Angular会自动设置正确的multipart/form-data请求头。
2. FormData键名冲突：原代码重复使用frm作为键名，导致文本覆盖文件，需给文件和文本设置独立键名。
3. PHP接收逻辑错误：文件上传不能用json_decode(file_get_contents('php://input'))，必须通过$_FILES全局变量获取临时文件，文本字段用$_POST获取。
4. 权限注意：PHP的uploads目录需设置755权限，确保服务器有写入权限。

内容的提问来源于stack exchange，提问作者Eng.Ismail