我正在使用react-native-camera,我在react-native中获取二进制数据的图像时遇到了麻烦。我需要这个来上传图像到我们的后端。我唯一能得到的是图像的URI,然后可能会将其作为FormData发送到服务器,但不建议这样做,因为这将需要对我们的后端进行一些基础设施更改。有没有人知道这个问题的解决方案或一些提示?任何想法或帮助是非常感谢。
react-native-camera
react-native
FormData
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 );
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),这意味着你不需要担心完成后清理这些缓存。
doNotSave: true
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) });
3条答案
按热度按时间oewdyzsn1#
如果您想从react-native-camera中获取二进制数据形式的图像,建议使用react-native-fs读取uri
如果您想通过FormData上传图像,我建议使用rn-fetch-blob
vh0rcniy2#
如果您已经在使用react-native-camera,则另一种方法是在捕获图像时,直接以 base64 的形式请求它:
如果你的目标只是拍张照片,显示预览,然后上传到服务器,继续下一步,那么这种方法的好处是它不会将照片保存在设备缓存中(
doNotSave: true
),这意味着你不需要担心完成后清理这些缓存。kmpatx3s3#
可以使用“react-native-image-crop-picker”选取图像和视频。请将以下属性设置为true
包括Base64:真
图像文件内容将作为data属性中的base64编码字符串提供