typescript - 从 MS Graph API 获取用户照片并显示图像

Question

我很抱歉这是一个非常具体的问题，但我很绝望，我会很感激任何提示/指示。

场景如下:我正在发出一个 HTTP GET 请求来检索 profilePhoto并在我的 Angular 应用程序中更新图像配置文件。

这是我的graph.service:

import { Injectable } from "@angular/core";
import { Http, Headers } from "@angular/http";
import { AdalService } from "../adal/adal.service";

@Injectable()
export class GraphService {
  private graphUri = "https://graph.microsoft.com/v1.0/";

  constructor(private http: Http, private adalService: AdalService) {}

  public userPhoto(upn: string) {
    return this.http
      .get(
        this.graphUri +
          "users/" +
          this.adalService.userInfo.profile.upn +
          "/photo/$value",
        { headers: this.headers() }
      )
      .map(res => res);
  }

  private headers() {
    const headers = new Headers();
    headers.set("Authorization", this.adalService.token);
    return headers;
  }
}

在我打算使用它的 home.component 上，我有:

this.graphService.userPhoto().subscribe(resp => {
  if (resp.status === 200) {
    const dataToString = resp.arrayBuffer();
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(dataToString);
    // Here there's an error:
    // 'Argument of type Array Buffer is not assignable
    //  to parameter of type Blob.
    const image = "data:image/jpeg;base64," + dataToString;
    document.getElementById("photo").setAttribute("src", image);
  }
});

老实说，我什至不知道自己走的路是否正确...我在某处读到过关于 FileReader 的内容。但起初，这是我的尝试:

this.graphService.userPhoto().subscribe(resp => {
  if (resp.status === 200) {
    const dataToString = resp.text();
    const image = "data:image/jpeg;base64," + btoa(encodeURI(dataToString));
    document.getElementById("photo").setAttribute("src", image);
  }
});

dataToString 包含如下内容:����JFIF``��C 我理解为二进制数据。

需要说明的是，GET 请求返回200，不记名 token 有效。我只是以某种方式无法显示它...

我做错了什么？应该如何处理？

非常感谢!

编辑 1: @RasmusW - 我添加 encodeURI 调用的唯一原因是没有它我会得到以下错误:

ERROR DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

使用 encodeURI 我的 img HTML 标签看起来像这样:

<img _ngcontent-c2="" id="photo" src="data:image/jpeg;base64, JUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJUVGJUJGJUJEJTAwJTEw(shortened)">

但是，图像不显示。

Answer 1

您需要图像的 base64 编码表示。这不仅仅是将二进制数据转换为字符串。

为了让它工作，你需要告诉 Angular 使用 responseType 期待一个 Blob范围。这让它知道不要尝试将其解析为 JSON。您将该 blob 转换为数据 URI。

在 Stack Overflow 上有几种关于它如何工作的解释(带有示例):

• https://stackoverflow.com/a/45722275/105518
• https://stackoverflow.com/a/40862839/105518
• https://stackoverflow.com/a/47002145/105518