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

Question

我在我的 Angular 2 应用程序中实现了一个 POST 文件的方法。它基于我找到的解决方案 here .

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

我的问题是我不明白如何在调用 xhr.send() 之后将响应返回给 onSubmit() 方法。 Angular2 以及 observables 和 promises 的概念对我来说都是全新的。

我怎样才能从这个 observable 获得服务器的响应？

Answer 1

服务器响应提供给 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>

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

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

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