我正在尝试以Content-Type: application/octet-stream.
我通过调用从画布中获取图像的 Base64 字符串canvas.toDataURL('image/jpeg', 0.1);（我也尝试用 1、0.5、0.2 调用它，只是为了检查它是否有效并停止给我错误）
然后使用那个 Base64 字符串，我调用 EmotionService 的getUserEmotion方法。
我按照这个答案中提到的说明，使用 Angular 的 HttpClient 进行 AJAX 调用。这是我的服务的样子：
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export class EmotionService {
apiUrl: string = 'https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize';
constructor(private http: HttpClient) {}
getUserEmotion(userImageBlob) {
let headers = new HttpHeaders();
headers = headers.set('Ocp-Apim-Subscription-Key', 'my-api-key-here');
headers = headers.set('Content-Type', 'application/octet-stream');
return this.http.post(this.apiUrl, { "data": this.makeBlob(userImageBlob) }, { headers: headers });
}
makeBlob(dataURL) {
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = decodeURIComponent(parts[1]);
return new Blob([raw], { type: contentType });
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
}这是我的网络选项卡对于请求的样子：
以下是我的问题：
- 在我关注的 SO Answer 中，他们还指定我应该
processData:false为我的 AJAX 调用设置选项。但我不确定如何使用 Angular 的HttpClient. - 请求有效负载中的
data字段也为空。但是当我调试时，我从方法中得到了正确的 Blob 对象makeBlob。为什么会这样？
