在 Observable 中 xhr.send() 之后获取服务器响应

我实现了一种在 Angular 2 应用程序中发布文件的方法。它基于我找到的解决方案here https://stackoverflow.com/a/35985489/2018084.

由于 Angular 2 本身不支持文件上传，因此解决方案必须利用xhr。这就是工作解决方案的样子：

组件方法：

onSubmit(): void {
    this.inputModuleService.postFile(this.files).subscribe(() => {
        console.log('sent');
    });
}

服务方式：

postFile (files: File[]): Observable<string> {
    var url = this.uploadURL;

    return Observable.create(observer => {
        var formData: FormData = new FormData()
        var xhr: XMLHttpRequest = new XMLHttpRequest();

        formData.append("upload", files[i], files[i].name);

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    observer.next(JSON.parse(xhr.response));
                    observer.complete();
                } else {
                observer.error(xhr.response);
                }
            }
        };

        xhr.open('POST', url, true);
        xhr.send(formData);
    });
}

我的问题是我不明白如何将响应返回给onSubmit()调用后的方法xhr.send()。 Angular2 以及可观察量和承诺的概念对我来说都是新的。

我怎样才能从这个可观察到的服务器得到响应？

服务器响应提供给成功和错误回调subscribe():

onSubmit(): void {
    this.inputModuleService.postFile(this.files).subscribe(
      response => {
          //response is the server's response, parsed into a javascript object
          console.log('server responded: ', response);
      },
      error => {
          //server response emitted when xhr.status !== 200
          console.error(error);
      }
   );
}

这行：

formData.append("upload", files[i], files[i].name);

会抛出错误，因为i未定义。您复制的代码在循环内包含该行并且i是当前索引。您的代码中并非如此。

您的函数声明：

postFile (files: File[]): Observable<string>

应该改为

postFile (files: File[]): Observable<any>

因为 Observable 返回的是postFile发出对象，而不是字符串。

如果您只想上传一个文件，您还应该更改files: File[] to file: File并在文件中附加：

formData.append("upload", file, file.name);