Datei in Angular 4 hochladen und an PHP-Datei übergeben

Question

Ich versuche, Datei in Angular 4 hochzuladen und es an PHP mit anderen Daten wie Text zu senden, wenn ich var_dumb() verwende, um die Daten das Dateiobjekt leer zu lesen.

Mein post.component.html:

<a class="upload-photo-item"> 
      <input type="file" class="Upload-photo" accept="image/*" ngf-max-size="2MB" (change)="handleInputChange($event)"/> 
      <i class="fa fa-tags olymp-computer-icon" aria-hidden="true"></i> 

      <h6>Upload Photo</h6> 
      <span>Browse your computer.</span> 
     </a> 

Und das ist handleInputChange Funktion:

post = new PostObject(); 
    image: File; 

handleInputChange(event) { 
     console.log(event); 
     this.image = event.target.files[0]; 

     var pattern = /image-*/; 

     if (!this.image.type.match(pattern)) { 
      console.log('File is not an image'); 
      return; 
     } 
     this.post.postPhoto = this.image; 

     console.log('image :' + this.image); 
    } 

Alles bis jetzt perfekt ist, kann ich meine Objektdatei in der Konsole sehen, jetzt ist hier das Problem:

Mein post.php:

$data = json_decode(file_get_contents('php://input'), true); 
var_dump($data); 
exit; 

Die API-Antwort mit array (0) wie folgt aus:

Es wird von base64 gelöst werden kann, aber das ist keine Option für mich, irgendwelche Ideen bitte?

Answer 1

hoffte, das hilft, wie Formulardaten in Eckige senden 2+:

import {HttpClient, HttpHeaders} from '@angular/common/http'; 
    ... 
    constructor(private http: HttpClient) {} 
    ... 
    test() { 
      const formData = new FormData(); 
      formData.append('data', JSON.stringify({ 
       test: 'test' 
      })); 
      formData.append('file', file); 

      const headers = new HttpHeaders().set('Content-Type', []); 

      // responseType 'text' is necessary for IE 
      return this.http.post(url, formData, { 
       headers, 
       responseType: 'text' 
      }); 
    }