从 blob 读取二进制数据以显示图像 React Native

Question

这是我必须做的流程：

\n\n

\n
1. 使用图像选择器获取图像以进行本机反应并获取 Base64 中的图像数据 ( sourceData)
\n

\n\n

ImagePicker.showImagePicker(imagePickerOptions, (response) => {\n    const sourceData = { uri: \'data:image/jpeg;base64,\' + response.data };\n});\n

\n\n

\n
2. 将其发布sourceData.uri到我的计算机上本地运行的服务器：
\n

\n\n

const data = new FormData();\ndata.append(\'receipt\', {\n    uri: sourceData.uri,\n    type: \'image/jpeg\',\n    name: \'receipt\'\n});\n\nconst response = await fetch(SERVER_POST_ROUTE, {\n    method: \'POST\',\n    headers: {\n        \'Accept\': \'application/json\',\n        \'Content-Type\': \'multipart/form-data\',\n    },\n    body: data\n});\n

\n\n

看起来sourceData.uri像这样：

\n\n

\'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBYRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABLKADAAQAAAABAAAA4QAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgA4QEsAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMABgYGBgYGCgYGCg4KCgoOEg4ODg4SFxISEhISFxwXFxcXFxccHBwcHBwcHCIiIiIiIicnJycnLCwsLCwsLCwsLP/bAEMBBwcHCwoLEwoKEy4fGh8uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4uLi4u<\xe2\x80\xa6>\'\n

\n\n

\n
3. 这就是服务器 POST 路由（缩短）
\n

\n\n

router.post(\'/:id/receipts\', (req, res) => {\n  const id = req.params.id\n  const expense = expenses.find((expense) => expense.id === id)\n\n  if (expense) {\n    const receipt = req.files.receipt as UploadedFile\n    const receiptId = `${id}-${expense.receipts.length}`\n    receipt.mv(`${process.cwd()}/receipts/${receiptId}`, (err) => {\n\n      expense.receipts.push({\n        url: `/receipts/${receiptId}`\n      })\n      res.status(200).send(expense)\n\n    })\n\n  } else {\n    res.status(404)\n  }\n})\n

\n\n

\n
4. 这就是当我console.log(receipt)
\n

\n\n

{ name: \'receipt\',\n  data:\n   <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 58 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 01 ... >,\n  encoding: \'7bit\',\n  truncated: false,\n  mimetype: \'image/jpeg\',\n  md5: SOME_MD5_STRING,\n  mv: [Function: mv] }\n

\n\n

\n
5. 如您所见，服务器将文件移动到本地位置receipt.mv(`${process.cwd()}/receipts/${receiptId}`)
\n

\n\n

6.我的问题：我需要访问这个位置并将我得到的内容转换回图像

\n\n

我现在正在做的事情：\n- 使用 fetch 获取该位置的内容并提取blob

\n\n

const response = await fetch(FILE_LOCAL_URL);\nconst blob = await response.blob();\n

\n\n

\n
• 这就是我得到的console.log(blob)
\n

\n\n

{ _data: \n   { size: 23296,\n     offset: 0,\n     blobId: \'F8F693CD-6FBB-41C8-95E3-E54EB2A82F63\',\n     type: \'application/octet-stream\',\n     name: \'5b996064dfd5b783915112f5-3\' } }\n

\n\n

现在：我不知道如何将此二进制文件转换为 Base64 字符串以添加到uri图像中。这就是我尝试过的，但显然它不起作用：

\n\n

<Image \n    source={{ uri: \'data:image/jpeg;base64,\' + blob._data }}\n    style={{height: 120, width: 80}}/>\n

\n\n

非常感谢任何帮助。\n谢谢

\n

Answer 1

实际上我解决了它：理想情况下，要读取 blob，您应该使用它readAsArrayBuffer，但它没有在 React Native 中实现（另请阅读https://forums.expo.io/t/blob-object-how-can-i-access-the- blobs-raw-data-as-an-arraybuffer/9717）。但您可以使用readAsDataURL 我正在寻找的内容存储在reader.result.

const response = await fetch(URL_OF_BINARY_DATA_FILE);
const blob = await response.blob();
var reader = new FileReader();
reader.onload = () => {
   console.log(reader.result);  
}
reader.readAsDataURL(blob);