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

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

如何从这个可观察的服务器获得服务器的响应？

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

在Observable中的xhr.send（）之后获取服务器响应

1 个答案: