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，承载令牌有效。我只是以某种方式未能显示它......

我做错了什么？人们应该如何接近它？

非常感谢！

编辑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的工作原理（包括示例）有几种解释：

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

1 个答案: