Question

我是Angular的新手，所以也许这个问题在某种程度上看似微不足道。

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

我正在使用ngx-uploader，并且我能够使用基于提供示例的实现的组件发送带有文件数据的POST。我了解POST请求是由此ngx-uploader根据已发出的事件发出的。如何处理此POST的响应？在常规请求的情况下，我可以订阅返回Observable的任何Http服务方法，但是我无法弄清楚在使用这个上传器时如何读取此响应？

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') {
        ....
    }
}

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

2 个答案: