Angular2 http put方法不发送formData

问题描述：

我想从Angular2（使用打字稿）向Laravel发出的API发送PUT请求。我正在做FormData类，因为这是我可以附加一个文件到请求。 POST方法运行良好，但是当我尝试使用PUT方法更新模型时，API会收到一个空请求。Angular2 http put方法不发送formData

我做了一些调试，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返回，因为在控制器所需的字段的 “无法处理的实体”。

您需要使用Content-Type标头，只有Laravel可以处理该类型的放置。 –

您可能还需要一个'Accept'标头来告诉服务器你想要一个json结果。如果我们没有该标题，我们发现Firefox有问题。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept（虽然这不是当前的问题，请尝试@Z.Bagley为此提出的建议）。 – ps2goat

答

可以使PUT请求这样

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

不起作用。当印刷“身体”时，它似乎是空的。 – levis

您是否在控制台日志 – CharanRoot

中尝试过formData，这是一个Laravel错误。我已经解决了这个问题，无论如何谢谢你！ – levis

答

Z. Bagley让我觉得这可能是一个Laravel相关的问题，事实上它是。 There's this bug使用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' => '[email protected]' 
])->middleware('jwt.auth');

Angular2 http put方法不发送formData

相关推荐