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返回，因爲在控制器所需的字段的「無法處理的實體」。

來源

2017-06-22 levis

您需要使用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 
     }; 
     });

來源

2017-06-22 03:34:53 CharanRoot

不起作用。當印刷「身體」時，它似乎是空的。 – 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');

來源

2017-06-22 14:52:15 levis

Angular2 http put方法不發送formData

回答

相關問題