reactjs - 如何显示从 fetch() 方法返回的图像 - react-native

Question

我有以下代码可以从 API 中检索图像

await fetch('https://example.com/api/user/fileaccess', {
    method: 'POST',
    headers: {
      Accept: '*',
      'Content-Type': 'application/json',
      'token':'xxxxxxxxxxxxxxxxxxxxxxxx'
    },
    body:  JSON.stringify({"applicantid": xxxx, "user_secret": "xxxxxxxxxxx","fileid":xxxxx}),
  }).then((response) => {
    console.log(response);
  }); 

请求已完成，我登录了我的控制台。

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "xxxxx-xxxx-xxx-xxxx-xxxxx", "offset": 0, "size": 953328}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "xxxxx-xxxx-xxxx-xxxx-xxxxx", "offset": 0, "size": 953328}}, "headers": {"map": {"cache-control": "max-age=2592000", "connection": "Keep-Alive", "content-type": "image/jpeg", "date": "Tue, 04 Feb 2020 10:34:14 GMT", "expires": "Thu, 05 Mar 2020 10:34:14 GMT", "keep-alive": "timeout=5, max=100", "pragma": "public", "server": "Apache", "transfer-encoding": "chunked"}}, "ok": true, "status": 200, "statusText": undefined, "type": "default", "url": "https://example.com/api/user/fileaccess"}

我的问题是，如何在我的应用程序中将此数据显示为图像？是否可以从此数据转换 base64？

Answer 1

您需要将其提取到 json 或文本或其他一些数据中，然后才能对响应执行任何操作。

根据 Mozilla docs , 一个基本的获取请求设置起来非常简单。看看下面的代码:

fetch('http://example.com/movies.json')
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log(myJson);
  });

所以，修改你的代码如下:

fetch('https://example.com/api/user/fileaccess', {
    method: 'POST',
    headers: {
      Accept: '*',
      'Content-Type': 'application/json',
      'token':'xxxxxxxxxxxxxxxxxxxxxxxx'
    },
    body:  JSON.stringify({"applicantid": xxxx, "user_secret": "xxxxxxxxxxx","fileid":xxxxx}),
  })
.then(response => response.json())
.then((result) => {
     console.log("Your intended result is: " , result)
}); 

response.json()添加只是假设服务器正在返回 JSON 数据。
如果没有，您也可以根据您的服务器实现尝试以下方法。

arrayBuffer() blob() json() text() formData()