Javascript 如何使用redux observable正确获取二值图像？

我正在尝试使用redux observable获取图像

基于，它返回所请求照片的二进制数据

我使用Postman成功地获得了图像（它在结果中显示图像，因为它是二进制的）

然而，当我尝试使用时，响应我得到的总是

null

，响应类型总是

json

，无论我为内容类型给出什么，比如

图像/jpeg

，

文本/普通

，

应用程序/json

export const getAvatarEpic = (action$, store) =>
  action$
    .ofType(GET_AVATAR)
    .mergeMap(action =>
      ajax
        .get(
          'https://graph.microsoft.com/v1.0/me/photo/$value',
          {
            // 'Content-Type': 'image/jpeg',
            'Authorization': 'Bearer ' + myToken
          }
        )
        .do(res => console.log(res))  // <- the result
        .map(getAvatarSucceed)
        .catch(getAvatarFailed)
    );

---

在使用Angular 4构建图形浏览器时，我遇到了相同的问题。在我们的例子中，当请求图像时，我们必须将

responseType

参数设置为

ArrayBuffer

，而不是默认值

然后在处理响应时，我们获取blob URL并设置image元素的src：

 let blob = new Blob( [ result.arrayBuffer() ], { type: "image/jpeg" } );
 let imageUrl = window.URL.createObjectURL( blob );

 const imageResultViewer = <HTMLImageElement>document.getElementById("responseImg");
 imageResultViewer.src = imageUrl;

---

我想首先确保redux observable和RxJS是分开的。这个问题实际上是一个RxJS问题，因为redux observable很小，几乎所有的问题（即使在使用redux observable时）都会遇到，实际上几乎所有的问题都是RxJS问题。这一点很重要，因为当你提出问题时，如果你把它们当作Rx问题，你会发现更多的帮助和资源，因为这是一个更大的社区。希望这有帮助

---

如果您使用RxJS v5的内置ajax实用程序，则需要使用常规的

ajax（）

帮助程序，而不是速记

ajax.get（）

one

然后，您可以提供

responseType:'arraybuffer'

以将图像作为二进制数据获取：

export const getAvatarEpic = (action$, store) =>
  action$
    .ofType(GET_AVATAR)
    .mergeMap(action =>
      ajax({
        url: 'https://graph.microsoft.com/v1.0/me/photo/$value',
        headers: {
          'Authorization': 'Bearer ' + myToken
        },
        responseType: 'arraybuffer'
      })
      .do(res => console.log(res))  // <- the result
      .map(getAvatarSucceed)
      .catch(getAvatarFailed)
    );

---

您是否需要提供包含二进制图像mime类型的接受标头？e、 为什么json是响应类型？@Tim是的，这是一个很好的观点。基于，我只需要提供

授权

。然而，我确实尝试为内容类型添加

image/jpeg

，

text/plain

，

application/json

，但是responseType总是

json

。我相信这里的“内容类型”只会影响请求，而不会影响响应。您应该在响应体中返回图像的base64编码版本。你也可以添加响应体吗？

 let blob = new Blob( [ result.arrayBuffer() ], { type: "image/jpeg" } );
 let imageUrl = window.URL.createObjectURL( blob );

 const imageResultViewer = <HTMLImageElement>document.getElementById("responseImg");
 imageResultViewer.src = imageUrl;

export const getAvatarEpic = (action$, store) =>
action$
.ofType(GET_AVATAR)
.mergeMap(action =>
  aja:@{
    url: 'https://graph.microsoft.com/v1.0/me/photo/$value',
    responseType: 'arraybuffer',
    headers: {
      // 'Content-Type': 'image/jpeg',
      'Authorization': 'Bearer ' + store.getState().auth.token
    }
  })
    .map(getAvatarSucceed)
    .catch(getAvatarFailed)
); 

export const getAvatarEpic = (action$, store) =>
  action$
    .ofType(GET_AVATAR)
    .mergeMap(action =>
      ajax({
        url: 'https://graph.microsoft.com/v1.0/me/photo/$value',
        headers: {
          'Authorization': 'Bearer ' + myToken
        },
        responseType: 'arraybuffer'
      })
      .do(res => console.log(res))  // <- the result
      .map(getAvatarSucceed)
      .catch(getAvatarFailed)
    );

import { ajax } from 'rxjs/observable/dom/ajax';

ajax({
  url: 'https://proxy.apisandbox.msdn.microsoft.com/svc?url=https%3A%2F%2Fgraph.microsoft.com%2Fv1.0%2Fme%2Fphoto%2F%24value',
  headers: { 'Authorization': 'Bearer {token:https://graph.microsoft.com/}' },
  responseType: 'arraybuffer'
})
  .subscribe(res => {
    console.log(res);
    const buffer = res.response;
    const blob = new Blob([buffer], { type: 'image/jpeg' });
    const url = URL.createObjectURL(blob);
    const img = document.createElement('img');

    img.src = url;
    document.body.appendChild(img);
  });