如何使用FormData方法将带图片的Angular2表单数据提交至PHP？

Hey there! Let's get your component code properly formatted first, then I'll walk through key parts to implement your text + file upload form smoothly.

Formatted add.component.ts Code #

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AdminPage } from '../../../_models/admin.page.model';
import { AdminPageService } from '../../../_admin_service/admin.page';
import { ImageUploadService } from '../../../_common_service/image.upload';

export class AddComponent implements OnInit, AfterViewInit {
  adminPageModel = new AdminPage('', '', '', '', '');
  selectedFile: File | null = null;
  selectedFilePreview: string | ArrayBuffer | null = null;

  constructor(
    private route: ActivatedRoute,
    private adminPageService: AdminPageService,
    private imageUploadService: ImageUploadService
  ) {}

  ngOnInit(): void {
    // Initialize any route data or default values here
  }

  ngAfterViewInit(): void {
    // Add post-view initialization logic if needed (e.g., third-party library setup)
  }

  // Handle file selection and optional preview
  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
      
      // Generate preview if it's an image file
      if (this.selectedFile.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.selectedFilePreview = e.target?.result || null;
        };
        reader.readAsDataURL(this.selectedFile);
      } else {
        this.selectedFilePreview = null;
        alert('Please select an image file!');
      }
    }
  }

  // Submit form with text data and uploaded file
  onSubmit(): void {
    if (!this.selectedFile) {
      alert('Please select an image to upload!');
      return;
    }

    // Build FormData to send multipart request
    const formData = new FormData();
    // Append text fields from your AdminPage model (adjust property names to match your model)
    formData.append('title', this.adminPageModel.title);
    formData.append('description', this.adminPageModel.description);
    formData.append('content', this.adminPageModel.content);
    // Append the file with a key your backend expects
    formData.append('pageImage', this.selectedFile, this.selectedFile.name);

    // Call your service to submit the data
    this.adminPageService.createAdminPage(formData).subscribe({
      next: (response) => {
        console.log('Page created successfully:', response);
        // Add success handling: redirect to list, show toast, etc.
      },
      error: (err) => {
        console.error('Error creating admin page:', err);
        // Add error handling: show user-friendly message, log details
      }
    });
  }
}

Corresponding add.component.html Template #

<form (ngSubmit)="onSubmit()" #adminPageForm="ngForm" class="mt-4">
  <!-- Text Input Field: Page Title -->
  <div class="form-group mb-3">
    <label for="pageTitle" class="form-label">* Page Title</label>
    <input 
      type="text" 
      id="pageTitle" 
      name="pageTitle" 
      [(ngModel)]="adminPageModel.title" 
      required
      class="form-control"
      placeholder="Enter page title"
    >
    <div *ngIf="adminPageForm.controls['pageTitle']?.invalid && adminPageForm.controls['pageTitle']?.touched" class="text-danger">
      Page title is required
    </div>
  </div>

  <!-- Text Input Field: Page Description -->
  <div class="form-group mb-3">
    <label for="pageDescription" class="form-label">Page Description</label>
    <input 
      type="text" 
      id="pageDescription" 
      name="pageDescription" 
      [(ngModel)]="adminPageModel.description" 
      class="form-control"
      placeholder="Short description for the page"
    >
  </div>

  <!-- Textarea: Page Content -->
  <div class="form-group mb-3">
    <label for="pageContent" class="form-label">* Page Content</label>
    <textarea 
      id="pageContent" 
      name="pageContent" 
      [(ngModel)]="adminPageModel.content" 
      required
      class="form-control"
      rows="6"
      placeholder="Enter page content"
    ></textarea>
    <div *ngIf="adminPageForm.controls['pageContent']?.invalid && adminPageForm.controls['pageContent']?.touched" class="text-danger">
      Page content is required
    </div>
  </div>

  <!-- File Upload Field -->
  <div class="form-group mb-3">
    <label for="pageImage" class="form-label">* Page Image</label>
    <input 
      type="file" 
      id="pageImage" 
      name="pageImage" 
      (change)="onFileSelected($event)"
      accept="image/*"
      class="form-control"
    >
    <!-- Image Preview -->
    <img *ngIf="selectedFilePreview" [src]="selectedFilePreview" alt="Image Preview" class="mt-2 img-thumbnail" style="max-width: 250px;">
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!adminPageForm.valid">Create Page</button>
</form>

Key Tips for Smooth Implementation #

• FormData Best Practices: Always use FormData when sending files—plain JSON won't work for file uploads. Don't manually set the Content-Type header; Angular will automatically set it to multipart/form-data with the correct boundary when you pass FormData to HttpClient.
• Model Alignment: Double-check that the property names in your AdminPage model match the keys you're using in formData.append() (adjust them if your model has different field names).
• Validation: Add client-side validation (like the required checks in the template) to improve user experience, and add server-side validation too for security.
• Error Handling: Expand the error handling in onSubmit() to show user-friendly messages instead of just logging to the console (e.g., using Angular's MatSnackBar or a custom alert component).

内容的提问来源于stack exchange，提问作者Saswat