如何检查角度8中的响应或状态代码以将文件上传到S3预置URL,并且statusCode为200

时间:2019-06-25 07:43:23

标签: typescript amazon-s3 angular8

请求上传文件:

this.httpClient.put(preSingedUrl, file, httpOptions)
.subscribe((response: HttpResponse<any>) => {
console.log(response); // it's returning null
});

响应始终为空,但是在网络标签中,状态为200 OK。

access-control-allow-methods: GET, POST, OPTIONS
access-control-allow-origin: *
content-length: 1207
content-type: application/json
date: Tue, 25 Jun 2019 07:38:06 GMT
status: 200
strict-transport-security: 'max-age=31536000'
x-amz-apigw-id: someid
x-amzn-requestid: someid
x-amzn-trace-id: Root=someid;Sampled=1

如何使用角度8读取状态200 OK。

1 个答案:

答案 0 :(得分:2)

问题出在 httpOptions 中,这就是为什么响应为空的原因。

如果您尝试使用观察:“响应” 来使响应返回到订阅中,则您将其错误地作为标头传递。

应将其作为httpOptions的属性传递。

为确认相同,在下图中,在 httpClient.put()中的实现 可以看到包 @ angular / common 中的类型文件 http.d.ts ,其中观察是属性。

Code for httpClient.put

此外,在类型文件 http.d.ts 中,observe类型是字符串文字类型。 (有关字符串文字类型的更多信息,请访问https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types)。

因此需要将 httpOptions 中的观察强制转换为这种类型。

因此更改此:

// upload file to the pre-signed url
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Disposition': 'attachment;filename=' + file.name + '',
     observe: 'response'
  })
};

对此:

// Custom type for casting
type bodyType = 'body';

// upload file to the pre-signed url
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Disposition': 'attachment;filename=' + file.name + '',
  }),
  observe: <bodyType>'response'
};