Question

我正在尝试将Angular2的PUT请求（使用typescript）发送到使用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返回“Unprocessable Entity”。

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 请求时，There's this bug会导致错误。

我解决了发送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');

Angular2 http put方法不发送formData

2 个答案: