是否可以从 React-Native 中的图像中获取二进制数据?
Is it possible to get the binary data from an image in React-Native?
我正在使用 react-native-camera
,但在 react-native
中获取图像作为二进制数据时遇到问题。我需要这个才能将图像上传到我们的后端。我唯一设法获得的是图像的 uri,然后可能将其作为 FormData
发送到服务器,但不推荐这样做,因为这需要对我们的后端进行一些基础架构更改。
有没有人知道关于这个问题的解决方案或一些提示?
非常感谢任何想法或帮助。
如果你想从 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
);
如果您已经在使用 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
).这意味着您无需担心完成后的清理工作。
我正在使用 react-native-camera
,但在 react-native
中获取图像作为二进制数据时遇到问题。我需要这个才能将图像上传到我们的后端。我唯一设法获得的是图像的 uri,然后可能将其作为 FormData
发送到服务器,但不推荐这样做,因为这需要对我们的后端进行一些基础架构更改。
有没有人知道关于这个问题的解决方案或一些提示?
非常感谢任何想法或帮助。
如果你想从 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
);
如果您已经在使用 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
).这意味着您无需担心完成后的清理工作。