为什么从 IOS 设备上的 React Native 应用程序将图像上传到 firebase 存储失败？

Question

我一直在尝试将图像从我的本机反应应用程序上传到 firebase 存储。 图片在Android台设备和IOS台模拟器上上传成功。 但是，它们在 IOS 台设备上失败。 我收到以下错误：NativeFirebaseError: [storage/unknown] 发生未知错误。 （潜在原因“无法完成上传。当前大小为 0。预期最终大小为 201112。”）

我使用了 react-native-image-crop-picker 0.38.0

 const choosePhotoFromLibrary = () => {
        ImagePicker.openPicker({
          width: 300,
          height: 300,
          cropping: true
        }).then((image) => {
            const imageUri = Platform.OS === 'ios' ? image.sourceURL : image.path
            console.log(imageUri)
        })
        .catch((e) =>{
            console.log(e)
        })
      }

**Firebase 实施 - **

我的播客文件看起来像这样

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

$RNFirebaseAsStaticFramework = true

platform :ios, '12.4'
install! 'cocoapods', :deterministic_uuids => false
use_frameworks! :linkage => :static


target 'zaater' do
  config = use_native_modules!

  #Storage troubleshooting
  pod 'Firebase/Core'
  pod 'Firebase/Auth'
  pod 'Firebase/Firestore'
  pod 'Firebase/Storage'

  # Flags change depending on the env values.xx
  flags = get_default_flags()

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    # Upcoming versions of React Native may rely on get_default_flags(), but
    # we make it explicit here to aid in the React Native upgrade process.
    :hermes_enabled => true,
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    # :flipper_configuration => FlipperConfiguration.enabled,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'zaaterTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

对于我的 AppDelegate.mm 文件，我添加了以下内容：

#import <Firebase.h>

if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }

我将GoogleService-info.plist文件添加到iOS目录（与podfile同级）我也将其添加到XCODE。

**我的上传 function 看起来像这样：**

const uploadImage =  async (image) => {
        try {
            const uploadUri = image
            let filename = uploadUri.substring(uploadUri.lastIndexOf('/') + 1)
        
            // Add timestamp to File Name
            const extension = filename.split('.').pop();
            const name = filename.split('.').slice(0, -1).join('.')
            filename = name + Date.now() + '.' + extension

            //Store image
            const storageRef = storage().ref(`users/${idx}/${filename}`)
            const task = storageRef.putFile(uploadUri)
           
            //get image URL after being downloaded to firebase storage
            await task
            const url = await storageRef.getDownloadURL()
            return url
        } catch (e) {
            console.log(e)
            return null
        }
    }

Answer 1

有一个将图像文件上传到 Firebase 存储桶的演示。

结帐上传图片教程