如何在 Angular 2 中读取来自 ngx-uploader 的 http 响应？答案

【问题标题】：How to read http response from ngx-uploader in Angular 2?如何在 Angular 2 中读取来自 ngx-uploader 的 http 响应？
【发布时间】：2018-04-15 07:14:33
【问题描述】：

我是 Angular 的新手，所以这个问题在某种程度上可能看起来微不足道。

我想导入一个外部文件，所以我需要使用文件选择器创建表单，然后将此文件作为多部分文件发送POST 到某个端点。

我正在使用ngx-uploader，并且我可以使用基于提供的示例实现的组件来发送带有文件数据的 POST。我知道POST 请求是由这个ngx-uploader 基于发出的事件发出的。我该如何处理来自POST 的回复？在常规请求的情况下，我可以订阅任何返回 Observable 的 Http 服务方法，但我不知道在使用此 Uploader 时如何读取此响应？

【问题讨论】：

标签： angular typescript angular2-forms

【解决方案1】：

您说您已经能够发送 POST 请求，我假设您已经完成了 onUploadOutput(output: UploadOutput): void 功能。事实上，您可以直接在此函数中处理来自后端的 HTTP 响应。接口 UploadOutput 定义如下：

export interface UploadOutput {
  type: 'addedToQueue' | 'allAddedToQueue' | 'uploading' | 'done' | 'start' | 'cancelled' | 'dragOver' | 'dragOut' | 'drop' | 'removed' | 'removedAll';
  file?: UploadFile;
  nativeFile?: File;
}

你可以在你的函数中添加判断语句，当上传过程完成后，你会得到响应：

else if (output.type === 'done') {
  this.files.forEach(file => {
    console.log(file.response);
    this.response.emit(file.response);
  });
}

在此语句中，您可以在控制台中看到响应，并通过发出 eventEmitter 将其传递给父组件。

【讨论】：

【解决方案2】：

上传完成后，不再自动调用onUploadOutput，即else if (output.type === 'done')永远不会被执行，这是什么原因？我在 Stack Overflow 上没有看到类似的问题。

这是我的代码：

onUploadOutput(output: UploadOutput) : void {
    if (output.type === 'allAddedToQueue') {
        ....
    } else if(...){...
    } else if (output.type === 'done') {
        ....
    }
}

【讨论】：

请使用代码部分，这样会更好，更容易理解。