是否可以从反应本性中的图像中获取二进制数据

Question

我正在使用react-native-camera，并且在react-native中将图像作为二进制数据很难。我需要这能够将图像上传到我们的后端。我唯一要获得的是URI的图像，然后可能将其作为FormData发送到服务器，但不建议这样做，因为这需要一些基础架构更改为我们的后端。

是否有人知道解决方案或有关此问题的一些技巧？

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

Answer 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
);

Answer 2

如果您已经使用了 react-native-camera 是捕获图像时，请直接请求它因此：

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(。这意味着您不必担心完成后清理这些问题。

Answer 3

您可以使用' react-nimative-image-crop-picker '来选择图像和视频。将以下属性设置为true

包括base64：true

和图像文件内容将以base64编码的字符串在数据属性

中提供。

ImagePicker.openPicker({
  mediaType: "photo",
  includeBase64: true // this will give 'data' in response 
})
.then((response) => {
    console.log(resonse.data)
})
.catch((error) => {
   alert(error)
});