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

dz6r00yl  于 2022-12-27  发布在  React
关注(0)|答案(3)|浏览(256)

我正在使用react-native-camera,我在react-native中获取二进制数据的图像时遇到了麻烦。我需要这个来上传图像到我们的后端。我唯一能得到的是图像的URI,然后可能会将其作为FormData发送到服务器,但不建议这样做,因为这将需要对我们的后端进行一些基础设施更改。
有没有人知道这个问题的解决方案或一些提示?
任何想法或帮助是非常感谢。

oewdyzsn

oewdyzsn1#

如果您想从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
);
vh0rcniy

vh0rcniy2#

如果您已经在使用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),这意味着你不需要担心完成后清理这些缓存。

kmpatx3s

kmpatx3s3#

可以使用“react-native-image-crop-picker”选取图像和视频。请将以下属性设置为true
包括Base64:真
图像文件内容将作为data属性中的base64编码字符串提供

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

相关问题