反应本地上传图像到firebase

Question

我想将图像上传到firebase。 我为此使用了“反应形象挑战”。 当它要上传图像时，我总是会收到以下错误，有人可以帮助我吗？

我使用以下版本：

“ firebase”：“^9.6.11”，

“反应”：“ 17.0.2”，

“ react-native”：“ 0.68.0”，

“ react-native-nimative-image-picker”： ^4.7.3“，

Exception '*** -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]' was thrown while invoking sendRequest on target Networking with params (
        {
        data =         {
            blob =             {
                "__collector" =                 {
                };
                blobId = "3f942c9c-112f-4722-9180-db9d48759c29";
                lastModified = 1650919798034;
                offset = 0;
                size = 6535106;
                type = "";
            };
            trackingName = unknown;
        };
        headers =         {
            authorization = "Firebase eyJhbGciOiJSUzI1NiIsImtpZCI6ImM2NzNkM2M5NDdhZWIxOGI2NGU1OGUzZWRlMzI1NWZiZjU3NTI4NWIiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL3NlY3VyZXRva2VuLmdvb2dsZS5jb20vbWVlZHktYmFja2VuZCIsImF1ZCI6Im1lZWR5LWJhY2tlbmQiLCJhdXRoX3RpbWUiOjE2NTA5MTk3MjIsInVzZXJfaWQiOiJQdzRuREFBU2lPZmF6aEFRb2ZRUjZYc0VXNXkxIiwic3ViIjoiUHc0bkRBQVNpT2ZhemhBUW9mUVI2WHNFVzV5MSIsImlhdCI6MTY1MDkxOTcyMiwiZXhwIjoxNjUwOTIzMzIyL";
            "content-type" = "multipart/related; boundary=6073737953841832386462519242578";
            "x-firebase-storage-version" = "webjs/9.6.10";
            "x-goog-upload-protocol" = multipart;
        };
        incrementalUpdates = 0;
        method = POST;
        responseType = text;
        timeout = 0;
        url = "https://firebasestorage.googleapis.com/v0/b/zee-backend.appspot.com/o?name=users%2FPw4nDAASiOfazhAQofQR6XsEW5y1%2Fimages%2F1650919798034Pw4nDAASiOfazhAQofQR6XsEW5y1";
        withCredentials = 1;
    },
    4395
)
callstack: (
    0   CoreFoundation                      0x000000010b52cd44 __exceptionPreprocess + 242
    1   libobjc.A.dylib                     0x0000000109c96a65 objc_exception_throw + 48
    2   CoreFoundation                      0x000000010b5adf47 _CFThrowFormattedException + 200
    3   CoreFoundation                      0x000000010b5b843d -[__NSPlaceholderDictionary initWithCapacity:].cold.1 + 0
    4   CoreFoundation                      0x000000010b59b82f -[__NSPlaceholderDictionary initWithObjects:forKeys:count:] + 251
    5   CoreFoundation                      0x000000010b52b998 +[NSDictionary dictionaryWithObjects:forKeys:count:] + 49
    6   Zee                               0x0000000106cb0fc9 -[RCTBlobManager handleNetworkingRequest:] + 841
    7   Zee                               0x0000000106ce7536 -[RCTNetworking processDataForHTTPQuery:callback:] + 1654
    8   Zee                               0x0000000106ce636c -[RCTNetworking buildRequest:completionBlock:] + 3660
    9   Zee                               0x0000000106ced19c -[RCTNetworking sendRequest:callback:] + 1372
    10  CoreFoundation                      0x000000010b53371c __invoking___ + 140
    11  CoreFoundation                      0x000000010b530a8f -[NSInvocation invoke] + 305
    12  CoreFoundation                      0x000000010b530d22 -[NSInvocation invokeWithTarget:] + 70
    13  Zee                               0x0000000106ba3aa6 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2534
    14  Zee                               0x0000000106ba7f3a _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicEiN12_GLOBAL__N_117SchedulingContextE + 1402
    15  Zee                               0x0000000106ba77ec _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 156
    16  Zee                               0x0000000106ba7749 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25
    17  libdispatch.dylib                   0x000000010de838e4 _dispatch_call_block_and_release + 12
    18  libdispatch.dylib                   0x000000010de84b25 _dispatch_client_callout + 8
    19  libdispatch.dylib                   0x000000010de8b0df _dispatch_lane_serial_drain + 753
    20  libdispatch.dylib                   0x000000010de8bcc1 _dispatch_lane_invoke + 400
    21  libdispatch.dylib                   0x000000010de9697b _dispatch_workloop_worker_thread + 779
    22  libsystem_pthread.dylib             0x00007fff6fb0508f _pthread_wqthread + 326
    23  libsystem_pthread.dylib             0x00007fff6fb0401b start_wqthread + 15
)

RCTFatal
facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&, int, (anonymous namespace)::SchedulingContext)
facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const
invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_lane_serial_drain
_dispatch_lane_invoke
_dispatch_workloop_worker_thread
_pthread_wqthread
start_wqthread

我的功能上传图像

    export async function uploadUserImage(uri, uid) {
     try{
            const response = await fetch(uri)
            const blob = await response.blob()
            console.log(blob)
            const locationPath = firebaseUserStorageName + '/' + uid + '/images/' + genImageID(uid)
            const imageRef = ref(storage, locationPath)
            
            
            //The error occurs here
            await uploadBytes(imageRef, blob)
            
        }
        catch(error){
            console.warn(error)
        }
}

非常感谢

Answer 1

到目前为止，这是Github上的Firebase-JS-SDK中的一个公开问题。

删除clearglobaltimeout（）

要暂时解决它，您需要首先从node_modules/@firebase/storage/storage/dist/index.esm2017.js

    if (success) {
        clearGlobalTimeout(); // delete this line
        triggerCallback.call(null, success, ...args);
        return;
    }

，然后使用“ uploadbytesresumable”而不是“ uploadbytes”上传图像：

  export default async function uploadImageAsync(uri) {
    try {
        const response = await fetch(uri);
        const blobFile = await response.blob();
        const reference = ref(getStorage(), "random-image-name.jpg")
        await uploadBytesResumable(reference, blobFile)
        return await getDownloadURL(reference);
     }catch (e) {
        console.log(e)
   }}

Answer 2

我这样上传文件。
从“ firebase/storage”中导入 *作为st；

// Write to storage and get url
const writeToStorage = async (path, file) => {
  const storage = st.getStorage(app);
  const fileRef = st.ref(storage, path);
  const uploadTask = await st.uploadBytesResumable(fileRef, file);
  const url = await st.getDownloadURL(uploadTask.ref);
  console.log(url);
};