[英]Expo Camera Photo Upload To Firebase Storage is undefined - React Native
I am using import { Camera } from 'expo-camera';
我正在使用
import { Camera } from 'expo-camera';
to take pictures.拍照。 The taken picture is stored in the devicecache.
拍摄的照片存储在设备缓存中。 so far so good.
到目前为止,一切都很好。
Now I am trying to upload this taken images to Google Firebase Storage using import { getStorage, ref, uploadBytes } from "firebase/storage";
现在我正在尝试使用
import { getStorage, ref, uploadBytes } from "firebase/storage";
The return of doing a photo is:做照片的回报是:
{
"width":5472,
"uri":"file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540g1sm0%252Feprojstant/Camera/3689f575-d849-4e3e-b4ea-1ba40b96cf02.jpg",
"height":7296
}
Now I try to upload this like that:现在我尝试这样上传:
const storageRef = ref(storage, 'some-child');
const file = photo.uri
uploadBytes(storageRef, file).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
After a little delay, there is a file created in firebase/storage
.稍等片刻后,在
firebase/storage
中创建了一个文件。 I can open this file by an texteditor.我可以用文本编辑器打开这个文件。 the file includes the text undefined
该文件包含未定义的文本
The assumption is that the uri that i hand over is not the right solution.假设我移交的 uri 不是正确的解决方案。 However, I'm too new to development and can't find any help for react native.
但是,我对开发太陌生了,找不到任何关于 React Native 的帮助。 do you have an idea, a link or an example?
你有想法,链接或例子吗? Do I first have to convert the file to a blob or base64 and if so, how?
我是否首先必须将文件转换为 blob 或 base64,如果是,如何转换?
Everytime after I post a Question, I do find the solution.每次我发布问题后,我都会找到解决方案。
I blob the file like that:我这样 blob 文件:
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
and uploaded this result like this:并像这样上传这个结果:
uploadBytes(storageRef, blob).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
Here is the full function for my solution:这是我的解决方案的完整 function:
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
const [previewVisible, setPreviewVisible] = useState(false)
const [capturedImage, setCapturedImage] = useState(null)
let camera = Camera
const __takePicture = async () => {
if (!camera) return
const photo = await camera.takePictureAsync()
setPreviewVisible(true)
setCapturedImage(photo)
// Create a root reference
const storage = getStorage();
const uri = photo.uri
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
// TODO: UUID @some-child
const storageRef = ref(storage, 'some-child');
uploadBytes(storageRef, blob).then((snapshot) => {
console.log('Uploaded a blob or file!');
});
}
useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (YOUR VIEW RENDERING HERE)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.