Expo Camera 照片上传到 Firebase 存储未定义 - React Native

Question

我正在使用import { Camera } from 'expo-camera';拍照。拍摄的照片存储在设备缓存中。到目前为止一切顺利。

现在我正在尝试使用 import { getStorage, ref, uploadBytes } from "firebase/storage";

将拍摄的图像上传到 Google Firebase 存储

做照片的return是：

{ 
"width":5472,
"uri":"file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540g1sm0%252Feprojstant/Camera/3689f575-d849-4e3e-b4ea-1ba40b96cf02.jpg",
"height":7296
}

现在我试着这样上传：

const storageRef = ref(storage, 'some-child');
const file = photo.uri 
        uploadBytes(storageRef, file).then((snapshot) => {
            console.log('Uploaded a blob or file!');
        });

稍微延迟后，firebase/storage 中创建了一个文件。我可以用文本编辑器打开这个文件。该文件包含文本 undefined

假设我提交的 uri 不是正确的解决方案。但是，我对开发太陌生了，找不到任何关于 React Native 的帮助。您有想法、link 或示例吗？我是否必须首先将文件转换为 blob 或 base64？如果是，如何转换？

Answer 1

每次我 post 提出问题后，我都会找到解决方案。

我把文件变成这样：

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

并像这样上传了这个结果：

uploadBytes(storageRef, blob).then((snapshot) => {
        console.log('Uploaded a blob or file!');
    });

这是我的解决方案的完整功能：

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)

Expo Camera 照片上传到 Firebase 存储未定义 - React Native

Expo Camera Photo Upload To Firebase Storage is undefined - React Native

javascript

firebase

react-native

expo

google-cloud-firestore