反应本地博览会图像拾取器将图像上载到Firebase存储(V9)崩溃 [英] React Native expo image picker upload image to firebase storage (v9) crash

问题描述

我正在尝试将从世博会图像拾取器中选择的图像上传到Firebase存储(因为我正在使用世博会)。 我查看了EXPO图片选择器Git，找到了Firebase的ploadImageAsync。 所以我复制了它，只做了一点改动，但不知何故，它大多数时候都会让应用程序崩溃。只有几次，它正确地上传了图像，没有任何错误。

import { storage } from '../firebase'

async function uploadImageAsync(uri, name) {


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

    const fileRef = ref(storage, `files/${name}`);
    const result = await uploadBytes(fileRef, blob);

// We're done with the blob, close and release it
    blob.close();

    return await getDownloadURL(fileRef);
}

由于URI来自手机中的图像，因此uri=file:///Users/~absolute路径~/图像名称.jpg 这是Firebase的链接博览会图像拾取器 expo image picker for firebase

问题报告称， 使用类型为NSException的未捕获异常终止 由于未捕获的异常‘NSInvalidArgumentException’而终止应用程序，原因：‘-[__NSPlaceholderDictionary initWithObjects：forKeys：count：]：尝试从对象[0]中插入空对象’

编辑)我发现它可以在Android上运行，但不能在iOS上运行 对于iOS，我认为转换为BLOB是可行的。但是有错误在 const result = await uploadBytes(fileRef, blob)

推荐答案

我在FireBase版本9.6.5上也遇到了同样的问题，所以我使用了函数UploadBytesResumable而不是UploadBytes，它工作得很好，如果有紧急情况，您可以暂时使用该函数，仅供参考：- https://firebase.google.com/docs/storage/web/upload-files

我只在iOS 15和15+中遇到了这个问题，其他版本低于iOS 15，在Android应用程序UploadBytes中运行正常。

注意：-当使用XMLHttpRequest和ploadBytesResumable时，第一次镜像在iOS 15.2上可以顺利上传，然后在第二次上传时，上传镜像时会崩溃。为了避免使用它， Const img=等待获取(Image_Url)； Const blb=等待img.blob()；

import { getStorage, ref, getDownloadURL } from "firebase/storage";

const storageRef = ref(getStorage(), "image_name");

const img = await fetch(image_url);
const blob = await img.blob();

console.log("uploading image");
const uploadTask = uploadBytesResumable(storageRef, blob);

 // Listen for state changes, errors, and completion of the upload.
uploadTask.on('state_changed',(snapshot) => {
   // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
   const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
   console.log('Upload is ' + progress + '% done');
   switch (snapshot.state) {
      case 'paused':
          console.log('Upload is paused');
      break;
      case 'running':
         console.log('Upload is running');
      break;
   }
},
(error) => {
   this.setState({ isLoading: false })
   // A full list of error codes is available at
   // https://firebase.google.com/docs/storage/web/handle-errors
   switch (error.code) {
      case 'storage/unauthorized':
         console.log("User doesn't have permission to access the object");
      break;
      case 'storage/canceled':
         console.log("User canceled the upload");
      break;
      case 'storage/unknown':
         console.log("Unknown error occurred, inspect error.serverResponse");
      break;
   }
},
() => {
   // Upload completed successfully, now we can get the download URL
   getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
      //perform your task
   });
});

这篇关于反应本地博览会图像拾取器将图像上载到Firebase存储(V9)崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！