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

Question

我刚接触Angular，所以这个问题在某种程度上可能看起来微不足道。

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

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

Answer 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将其传递给父组件。

Answer 2

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

这是我的代码：

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