使用React Native将图像上传到Firebase存储

时间:2019-10-26 21:42:08

标签: react-native firebase-storage expo

我正在使用expo和firebase来构建本机应用程序,我想将图像上传到firebase存储。我具有以下功能作为onPress函数来上传图像。

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

运行应用程序时出现错误“未定义不是函数(在'... ImagePicker.launchImageLibrary ...'附近)”。 如何解决该错误?

3 个答案:

答案 0 :(得分:0)

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

# RN >= 0.60
cd ios && pod install

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

遵循install instructions

答案 1 :(得分:0)

我有一个例子:

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({...})

答案 2 :(得分:0)

看看这种格式是否有帮助

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