Ionic 3使用POST上传包含其他字段的图像

npm install -g ionic

ionic start myApp blank

cd myApp

ionic generate page image-upload

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

@Component({
  selector: 'page-image-upload',
  templateUrl: 'image-upload.html',
})
export class ImageUploadPage {
  image: string;

  constructor(private http: HttpClient) {}

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

    this.http.post('http://example.com/upload', formData)
      .subscribe(response => {
        console.log('Image uploaded successfully');
      }, error => {
        console.error('Image upload failed');
      });
  }
}

<ion-content padding>
  <input type="file" (change)="onFileChange($event)">
  <button ion-button (click)="uploadImage()">Upload</button>
</ion-content>

onFileChange(event) {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onloadend = () => {
    this.image = reader.result as string;
  };

  reader.readAsDataURL(file);
}

import { ImageUploadPage } from '../image-upload/image-upload';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  constructor(private navCtrl: NavController) {}

  openImageUploadPage() {
    this.navCtrl.push(ImageUploadPage);
  }
}

<ion-content padding>
  <button ion-button (click)="openImageUploadPage()">Upload Image</button>
</ion-content>