如何在Angular2中将数据发布到服务器？答案

【问题标题】：How to post data to server in Angular2?如何在Angular2中将数据发布到服务器？
【发布时间】：2016-08-27 06:54:10
【问题描述】：

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

我的控制台值是

FileList {0: File, length: 1}

我应该将什么作为我的帖子数据发送到服务器？

【问题讨论】：

标签： angular typescript

【解决方案1】：

我假设event.srcElement 实际上是<input type="file">，因为您正在访问它的files 属性，即available only of file input fields。

~~Angular2 Http 服务目前仅适用于字符串体。还有一个未解决的问题需要支持FormData，这将大大简化事情。~~

见feat(http): Support many types of body on Request/Response and all ConnectionBackend implementations。

现在，您可以使用用NgZone 包裹的原始XMLHttpRequest 对象将POST 数据作为FormData 发送。

但是，对您来说更简单的解决方案可能是将文件作为 base64 编码字符串发送：

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

更多信息见：

【讨论】：

【解决方案2】：

类似：

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

非常完美，https://angular.io/docs/ts/latest/tutorial/toh-pt6.html 拥有您所需的一切

【讨论】：

没关系，但在我的情况下，发送了一个空对象
toPromise() 发送一个异步对象，所以你必须保护你的代码，直到数据真正被发送