如何检查 angular 8 中的响应或状态代码以将文件上传到 S3 Presigned URL 且 statusCode 为 200

Question

请求上传文件：

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

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

如何使用 angular 8.

读取状态 200 OK

Answer 1

问题出在 httpOptions 中，这就是您收到空响应的原因。

如果您尝试使用 observe: 'response' 在订阅中获取响应，则您将其错误地作为 header.

它应该作为 httpOptions 的属性传递。

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

此外，在类型文件http.d.ts中observe的类型是字符串字面量类型。（更多关于字符串文字类型的信息：https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types）。

所以 observe in 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'
};

如何检查 angular 8 中的响应或状态代码以将文件上传到 S3 Presigned URL 且 statusCode 为 200

How to check the response or status code in angular 8 for upload file to S3 Presigned URL and statusCode is 200

amazon-s3

typescript

angular8