angular - Hur skickar man data till servern i Angular2?

onChange(event) {
    var image = event.srcElement.files;
    console.log(image);

Mitt konsolvärde är

FileList {0: File, length: 1}

Vad ska jag skicka till servern som mina postdata?

Svar #1

Jag antar att event.srcElement faktiskt är <input type="file"> eftersom du får åtkomst till dess files-egenskap som endast är tillgänglig för filinmatningsfält.

Angular2 Http-tjänst fungerar endast med strängkroppar för tillfället. Det finns ett öppet ärende för att även stödja FormData, vilket skulle förenkla saker avsevärt.

Se feat(http): Stöd många typer av kropp på Request/Response och alla ConnectionBackend-implementationer.

Just nu kan du använda ett rått XMLHttpRequest-objekt inlindat med NgZone för att skicka POST-data som FormData.

Men kanske ännu lättare lösning för dig skulle vara att skicka filen som en base64-kodad sträng:

onChange(event) {
    var image = event.srcElement.files[0];
    var reader = new FileReader();
    reader.onload = (evt) => {
        // Print base64 encoded file content
        console.log(evt.target.result);
        // Send data to server
        this.http.post(url, evt.target.result)...
    }
    reader.readAsDataURL(image);
}

För mer information se:

• Hur skickar man ett FormData-objekt med POST i Angular 2?
• Läsa filinnehåll på klientsidan i JavaScript i olika webbläsare
• http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp

Svar #2

Något som:

return this.http
      .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
      .toPromise()
      .then(res => res.json().data)
      .catch(this.handleError);

är perfekt, du har allt du behöver på https://angular.io/docs/ts/latest/tutorial/toh-pt6.html