Angular2 http put方法不發送formData

Question

我正在嘗試將Angular2的PUT請求（使用打字稿）發送到使用Laravel制作的API。 我正在使用FormData類，因為這是我可以將文件附加到請求的方式。 POST方法的效果很好，但是當我嘗試使用PUT方法更新模型時，API會收到一個空請求。

我已經進行了一些調試，並且FormData包含了預期的數據，因此我幾乎可以確定我的數據在PUT請求中丟失了。

服務：

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返回“無法處理的實體”。

Answer 1

您可以這樣發出看跌期權

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讓我認為這可能是與Laravel相關的問題，實際上是這樣。 使用multipart / form-data和PUT請求時， 此錯誤會導致錯誤。

我解決了發送POST請求並在表單中添加_method的問題，以這樣的請求結尾：

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'
    };
  });

您可以讓Laravel API監聽PUT請求：

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