如何从 url React Native 获取基于 64 的图像

Question

我正在尝试使用以下代码获取图像：

await fetch(
        `${BACKEND_URL}/api/visitors/getAvatar/${visitor.visitor.accountId}`
      )

我收到以下格式的回复：

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "7d70537a-3869-40d6-a9d1-bf092c2d7151", "offset": 0, "size": 10188}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "7d70537a-3869-40d6-a9d1-bf092c2d7151", "offset": 0, "size": 10188}}, "bodyUsed": false, "headers": {"map": {"access-control-allow-credentials": "true", "access-control-allow-origin": "*", "alt-svc": "h3=\":443\"; ma=86400, h3-29=\":443\"; ma=86400, h3-28=\":443\"; ma=86400, h3-27=\":443\"; ma=86400", "cache-control": "public, max-age=86400", "cf-cache-status": "DYNAMIC", "cf-ray": "6b432d06cb116b3f-AMS", "content-length": "10188", "content-type": "image/png", "date": "Fri, 26 Nov 2021 12:38:48 GMT", "etag": "W/\"27cc-PGkLO2FScsiEoWiW9u+CmIhDkaQ\"", "expect-ct": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\"", "nel": "{\"success_fraction\":0,\"report_to\":\"cf-nel\",\"max_age\":604800}", "report-to": "{\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report\\/v3?s=tFCAld4YJbsHJotK05x0jrG%2FUB2tWO%2BOjAd0LTRyhuwuSJzpu5OkPtUo1CGavatZPQb62WYJL2J%2BGcD%2BI4R2GS0HItiwIBtpOPBqB70yyPCx6AU6N5BCuCtM5Ck4WgSN2cf0yWpKV6TIRxzwvqIz\"}],\"group\":\"cf-nel\",\"max_age\":604800}", "server": "cloudflare", "x-content-type-options": "nosniff", "x-download-options": "noopen", "x-frame-options": "DENY", "x-xss-protection": "1; mode=block"}}

如何从中提取图像作为base64？我尝试过几个软件包，例如

react-native-fs

和

rn-fetch-blob

，但它们没有得到维护或弃用！

Answer 1

使用几个软件包后，我得到了这个获取 Base64 的技巧。上传任何图像后，您可以使用 rn-fetch-blob 将 url 转换为 base64。

RNFetchBlob.fs
      .readFile(
        Platform.OS === 'android' ? url : url.replace('file://', ''),
        'base64',
      ).then(res => {
         console.log(res, "base64 result");
     })

这里需要注意的一点是，当你在 iOS 中上传文件时，你可能会得到格式为“file://”的 url，如果是这种情况，请从 url 中删除它，然后传递它，就像我在上面的代码。