Angular2 http Put-Methode nicht senden FormData

Question

Ich versuche, eine PUT-Anfrage von Angular2 (mit Typoskript) zu einer API mit Laravel. Ich mache es mit der FormData-Klasse, weil ich so eine Datei an die Anfrage anhängen kann. Die POST-Methode funktioniert gut, aber wenn ich versuche, mein Modell mit einer PUT-Methode zu aktualisieren, erhält die API eine leere Anfrage.

Ich habe einige Debugging gemacht und die FormData enthält die Daten wie erwartet, so dass ich fast sicher bin, dass meine Daten bei der PUT-Anfrage verloren gehen.

Service:

import {Http, Headers, Response, RequestOptions} from "@angular/http"; 

@Injectable() 
export class SensorService { 

public data: Data[] = []; 
public sensors: Sensor[] = []; 

constructor(private http: Http, 
      private authService: AuthService) { 

} 

updateSensor(id: number, nombreNevera: string, ciudad: string, empresa_id: number, 
      tipoSensor: string, telefonoMarcado: number, 
      telefonoMarcadoB: number = null, telefonoMarcadoC: number = null, 
      telefonoMarcadoD: number = null, fechaCalibracion: number = null, 
      temMax: number = null, temMin: number = null, humeMax: number = null, 
      humeMin: number = null, correos: any = null, fileToUpload: any = null) { 

let formData: FormData = new FormData(); 

formData.append('nombreNevera', nombreNevera); 
formData.append('cuidad', ciudad); 
formData.append('empresa_id', empresa_id); 
formData.append('tipoSensor', tipoSensor); 
formData.append('telefonoMarcado', telefonoMarcado); 
formData.append('telefonoMarcadoB', telefonoMarcadoB); 
formData.append('telefonoMarcadoC', telefonoMarcadoC); 
formData.append('telefonoMarcadoD', telefonoMarcadoD); 
formData.append('fechaCalibracion', fechaCalibracion); 
formData.append('humeMax', humeMax); 
formData.append('humeMax', humeMin); 
formData.append('temMin', temMin); 
formData.append('temMax', temMax); 
formData.append('correos', JSON.stringify(correos)); 

if (fileToUpload != null) { 
    formData.append('certificado', fileToUpload, fileToUpload.name); 
} 

const headers = new Headers({ 
    'X-Requested-With': 'XMLHttpRequest' 
}); 

return this.http.put(APPCONSTANTS.API_ENDPOINT + 'user/sensor/edit/' + id + '?token=' + this.authService.getToken(), 
    formData, 
    {headers: headers}) 
    .map((response: Response) => { 
    return { 
     msg: response.json().msg 
    }; 
    }); 

} 

} 

Laravel gibt einen "Unprocessable Entity" wegen der erforderlichen Felder in der Steuerung.

Answer 1

Sie Put-Anfrage wie dies

let headers = new Headers({ 'Content-Type': 'application/json', 
             'Accept': 'application/json;' }); 

     let options = new RequestOptions({ headers: this.headers }); 

    let body = JSON.stringify(formData); 

    return this.http.put(APPCONSTANTS.API_ENDPOINT + 'user/sensor/edit/' + id + '?token=' + this.authService.getToken(), 
     body ,options) 
     .map((response: Response) => { 
     return { 
      msg: response.json().msg 
     }; 
     }); 

Answer 2

Z. Bagley ich denken können, dass dies ein Laravel verwandtes Problem, und es ist in der Tat sein könnte. There's this bug verursacht Fehler bei der Verwendung multipart/Form-Daten und PUT Anfrage.

Ich löste das Problem, eine POST-Anfrage zu senden und das Hinzufügen von _method zum Formular, mit einer Anfrage wie folgt endet:

formData.append('_method', 'PUT'); 

const headers = new Headers({ 
    'X-Requested-With': 'XMLHttpRequest' 
}); 
return this.http.post(APPCONSTANTS.API_ENDPOINT + 'user/sensor/edit/' + id + '?token=' + this.authService.getToken(), 
    formData, 
    {headers: headers}) 
    .map((response: Response) => { 
    return { 
     msg: 'sensor_updated' 
    }; 
    }); 

Sie können die Laravel API für eine PUT-Anfrage hören lassen:

Route::put('/sensor/edit/{id}', [ 
    'uses' => 'NeveraController@update' 
])->middleware('jwt.auth');