使用本机反应将图像上传到 Firebase 存储

Posted 2023-03-22

【中文标题】使用本机反应将图像上传到 Firebase 存储

【英文标题】：Upload image to firebase storage using react native

【发布时间】：2020-02-22 18:37:48

【问题描述】：

我正在使用 expo 和 firebase 构建一个 react-native 应用程序，我想将图像上传到 firebase 存储。我有以下功能作为上传图片的 onPress 功能。

choosePhoto = () => 
        const options = 
          noData: true,
        
        ImagePicker.launchImageLibrary(options, response => 
          if (response.uri) 
            this.setState( photo : response )
          
        )
      

我在运行应用程序时收到错误消息“未定义不是函数（'...ImagePicker.launchImageLibrary...'附近）”。 我该如何解决这个错误？

【问题讨论】：

在添加此代码之前应用程序是否正常工作？

是的。仅当单击上传图片的按钮时，我才会收到错误消息。

你能分享一个完整的代码吗？您使用哪个库来进行图像选择器？

【参考方案1】：

你需要链接 react-native-image-picker:

# RN >= 0.60
cd ios && pod install

# RN < 0.60
react-native link react-native-image-picker

关注install instructions

【讨论】：

我做了 'react-native link react-native-image-picker' 但我仍然得到同样的错误

【参考方案2】：

我有一个例子：

onImageUpload = async () => 
 try 
  if (cameraRollPerm === 'granted') 
    let pickerResult = await ImagePicker.launchImageLibraryAsync(
      allowsEditing: true,
      aspect: [4, 3],
    );
    var wantedMaxSize = 150;
    var rawheight = pickerResult.height;
    var rawwidth = pickerResult.width;
    var ratio = rawwidth / rawheight;
    var wantedwidth = wantedMaxSize;
    var wantedheight = wantedMaxSize/ratio;
    // check vertical or horizontal
    if(rawheight > rawwidth)
        wantedwidth = wantedMaxSize*ratio;
        wantedheight = wantedMaxSize;
    
    let resizedUri = await new Promise((resolve, reject) => 
      ImageEditor.cropImage(pickerResult.uri,
      
          offset:  x: 0, y: 0 ,
          size:  width: pickerResult.width, height: pickerResult.height ,
          displaySize:  width: wantedwidth, height: wantedheight ,
          resizeMode: 'contain',
      ,
      (uri) => resolve(uri),
      () => reject(),
      );
    );
    let uploadUrl = await firebaseSvc.uploadImage(resizedUri);
    console.log(uploadUrl)
  
 catch (err) 
  console.log('onImageUpload error:' + err.message);

;

with firebaseSvc = firebase initializeApp(...)

【参考方案3】：

看看这种格式是否有帮助

pickerResult = async () => 
    let result = await ImpagePicker.launchImageLibraryAsync(
      mediaTypes: ImpagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1
    );


      if (!result.cancelled) 
        this.setState( photo : result.uri );
              
  

注意： “照片”是状态，即 this.state.photo 基本上，如果结果（图像功能的输出没有被取消，则触发条件，然后获取所选图像的uri并将其存储在this.state.photo中

存储后，应该可以将此 .state.photo uri 传递到任何地方，即 firebase