是否可以从 React-Native 中的图像中获取二进制数据？

Posted 2023-03-11

【中文标题】是否可以从 React-Native 中的图像中获取二进制数据？

【英文标题】：Is it possible to get the binary data from an image in React-Native?

【发布时间】：2018-02-12 13:09:36

【问题描述】：

我正在使用react-native-camera，但无法将图像作为二进制数据获取到react-native。我需要这个才能将图像上传到我们的后端。我唯一设法得到的是图像的uri，然后可能将其作为FormData 发送到服务器，但不建议这样做，因为这需要对我们的后端进行一些基础架构更改。

有没有人知道这个问题的解决方案或一些提示？

非常感谢任何想法或帮助。

【参考方案1】：

如果你想从 react-native-camera 获取二进制数据。我推荐使用 react-native-fs 来读取 uri

示例

const RNFS = require("react-native-fs");
// response.uri from react-native-camera
RNFS.readFile(response.uri, "base64").then(data => 
  // binary data
  console.log(data);
);

如果你想通过 FormData 上传图片，我推荐 rn-fetch-blob

示例

import RNFetchBlob from 'rn-fetch-blob'
// response.uri from react-native-camera
const path = response.uri.replace("file://", "");
const formData = [];
formData.push(
  name: "photo",
  filename: `photo.jpg`,
  data: RNFetchBlob.wrap(path)
);

let response = await RNFetchBlob.fetch(
  "POST",
  "https://localhost/upload",
  
    Accept: "application/json",
    "Content-Type": "multipart/form-data"
  ,
  formData
);

【参考方案2】：

如果您已经在使用 react-native-camera，另一种方法是在捕获图像时，直接将其请求为 base64：

takePicture = async function(camera) 
  const options =  quality: 0.5, base64: true, doNotSave: true 
  const data = await camera.takePictureAsync(options)

  console.log(data.base64)

如果您的目标是只拍摄照片，可能显示预览然后上传到服务器并继续，那么这种方法的好处是它不会将该照片保存在您的设备缓存中 (doNotSave: true) .这意味着您无需担心在完成后清理它们。