Expo Camera Photo Upload To Firebase Storage 未定義 - React Native

Question

我正在使用import { Camera } from 'expo-camera'; 拍照。 拍攝的照片存儲在設備緩存中。 到目前為止，一切都很好。

現在我正在嘗試使用import { getStorage, ref, uploadBytes } from "firebase/storage";

做照片的回報是：

{ 
"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中創建了一個文件。 我可以用文本編輯器打開這個文件。 該文件包含未定義的文本

假設我移交的 uri 不是正確的解決方案。 但是，我對開發太陌生了，找不到任何關於 React Native 的幫助。 你有想法，鏈接或例子嗎？ 我是否首先必須將文件轉換為 blob 或 base64，如果是，如何轉換？

Answer 1

每次我發布問題后，我都會找到解決方案。

我這樣 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);
    });

並像這樣上傳這個結果：

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

這是我的解決方案的完整 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)