2017-12-10 5 views
0

Ich habe Probleme, Dateien und Daten mit Angular 2 und PHP auf meinen Server hochzuladen.

Ich habe diese File Upload In Angular 2? gefolgt, um die Daten und die Datei von Angular 2 hochzuladen, und alles scheint in Ordnung zu sein (ich kann die empfangenen Daten durch Drucken von php: // Eingabe sehen). Mein Angular-2-Code ist so etwas wie dieses:

upload(data: data, file: File): Observable<any> { 
    let header = new Headers(); 
    header.append('Content-Type', 'multipart/form-data'); 
    header.append('Accept', 'application/json'); 
    let options = new RequestOptions({ headers: header }); 

    let formData:FormData = new FormData(); 
    formData.append('file', file, file.name) 
    formData.append('data', JSON.stringify({data})); 

    return this.http 
    .post('myurl', formData, options) 
    .map(response => { 
     return response; 
    }) 
    .catch(error => Observable.throw(error.message || error)); 
} 

Das Problem ist, dass die Superglobals $ _POST und $ _FILES nicht bevölkert, so kann ich nicht auf sie zugreifen (und die Daten und Dateien hochgeladen so). Ich habe das gleiche Problem, wenn nur Daten hochladen und ich löste es das $ _POST superglobalen manuell bevölkert von

$_POST = file_get_contents("php://input"); 

zu tun, aber hier kann ich dies nicht wegen des $ _FILES ....

Ich sehe in diesem Beitrag PHP - empty $_POST and $_FILES - when uploading larger files, dass das Problem sein könnte, dass post_max_size oder upload_max_filesize klein sind, aber ich setze sie auf 100M (genug für meine Zwecke) und immer noch das gleiche. Sogar ich habe memory_limit mehr besucht, aber nichts.

Ich denke, dass mein Problem in meiner Server-Seite sein muss, könnten die Header sein, die ich eingestellt habe oder einige Konfiguration habe ich verpasst. Ich habe jedes CodeIgniter-Problem verworfen (ich benutze die letzte Version von CodeIgniter), weil ich versucht habe, eine einfache PHP-Datei zu posten, und ich habe das gleiche Problem. Die einfachste Server-Seite Ich bin es gewohnt ist:

<?php 
    header('Content-Type: application/json'); 
    header('Access-Control-Allow-Origin: *'); 
    header('Access-Control-Allow-Methods: GET, POST'); 
    header('Access-Control-Allow-Headers: Content-Type'); 

    exit(var_dump($_POST, $_FILES)); 
?> 

Aber ich leere Arrays ...

Hat jemand eine Ahnung von dem, was kann ich tun?

+0

Ich habe versucht eine einfache Non-Angular2 Multipart/Form-Daten-Post-Anfrage (ich meine, eine "Standard" HTML-Post-Anfrage wie vor vielen Jahren) und die $ _POST und $ _FILES Variablen wurden korrekt ausgefüllt ... – user3368457

Antwort

0

Ich habe endlich die Lösung für dieses Problem gefunden.

In nicht-technischen sprechen (Ich bin kein Experte), verwenden eine HTTP Post Multipart/Form-Datenanforderung eine Random Random-Zeichenfolge, um die verschiedenen Parameter vom Client gesendet, um den Server eine Referenz zu geben parse die Eingabe. Ein gültiger Request-Header sieht wie folgt aus:

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryYnNrniY34QSJ48LC 

In meiner implementatation, wenn sie als den Request-Header Einstellung:

header.append('Content-Type', 'multipart/form-data'); 

keine Grenze gesetzt, so dass PHP nicht die Eingabe analysieren populete $ _POST und $ _FILES. Ich habe versucht, meine eigene Grenze zu definieren, indem ich am Ende der Überschrift angehängt habe, aber es hat nicht funktioniert. Aber ... Die Lösung ist noch einfacher: Es gibt keine Notwendigkeit, den Content-Type-Header zu spezifizieren, Angular 2 wird es machen, indem er die Daten nur als FormData weitergibt und eine Post-Anfrage durchführt, die eine gültige Grenze für PHP schafft.

So ein gültiger Code, dies zu tun ist:

upload(data: data, file: File): Observable<any> { 
    let formData:FormData = new FormData(); 
    formData.append('file', file, file.name) 
    formData.append('data', JSON.stringify({data})); 

    return this.http 
    .post('myurl', formData) 
    .map(response => { 
     return response; 
    }) 
    .catch(error => Observable.throw(error.message || error)); 
} 

Wenn diese Post-Anforderung durchführen, Angular 2 wird eine gültige Grenze in den multipart/form-data-Header hinzufügen.

Das ist alles.

Wenn jemand mehr technische Details dazu hinzufügen kann, wäre es großartig.

Ich hoffe, dies könnte jemand anderem helfen.

Verwandte Themen