Question

我想将使用react-native-camera拍摄的图像上传到RN上的https://github.com/invertase/react-native-firebase存储

我无法上传图片。

我尝试了图像选择器库并完成了工作。

import React, { Component } from 'react';
import {Image, View, Text, StyleSheet, Dimensions,TouchableOpacity} from 'react-native'
import { RNCamera } from 'react-native-camera';
import {strings} from '../Lang/Strings';
import { Actions } from 'react-native-router-flux';
const { width, height } = Dimensions.get('window');


export default class ScanPage extends Component {
constructor(props) {
        super(props);
        this.state = {

  takePicture = async () => {
    if (this.camera) {

      const options = { quality: 0.5, base64: true }
      const data = await this.camera.takePictureAsync(options)


      Actions.ProfilePage({imagePath:data.uri,
        selectedIndex:this.state.selectedIndex,
        shapes:this.state.shapes });
        this.uploadPhoto(data);

};

  };

  render() {
    const {selectedIndex, images, shapes} = this.state;
      return(
          <View style={styles.container}>
          <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            style={styles.preview}
            type={RNCamera.Constants.Type.front}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}  />
          <View style={{flex:1,justifyContent:'center' ,alignItems:'center'}}>
          <View style={{marginTop:120}}>
      <Image   source={images[selectedIndex]} >
      </Image>
      </View>
      </View>
          <View style={styles.buttonSection}>
          <TouchableOpacity onPress={this._TogglePrev}>
            <View style={styles.buttons}>
            <Text style={{textAlign:'center',color: 'white'}}>
            {strings.back} 
            </Text>

            </View>
            </TouchableOpacity>

            <View style={{alignItems:'center', justifyContent:'center',
         height:height*0.04}}> 

            <Text style ={{color:'white',textAlign:'center'}}>{shapes[selectedIndex]} </Text> 

            </View>
            <TouchableOpacity onPress={this._ToggleNext}>
            <View style={styles.buttons}>
            <Text style={{textAlign:'center', color: 'white'}}>
            {strings.next} 
            </Text>

            </View>
            </TouchableOpacity>
          </View> 

          <View style={{alignItems:'center', justifyContent:'center',
          backgroundColor:'#D9E6FF',height:height*0.001,width:width*1}}> 

            <Text style ={{color:'white',textAlign:'center'}}> </Text> 

            </View>
          <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center'}}>

            <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}
            >
            <View style={{ 
      backgroundColor: 'white',
      borderRadius: (height*0.16)/2,
      padding: 15,
      alignSelf: 'center',
      margin: 25,
     height:height*0.085,
     width:width*0.16,
      justifyContent:'center',
      alignItems:'center',
      borderWidth:0.9,
      borderColor:'#D9E6FF',}}></View>
            </TouchableOpacity>
          </View>

        </View>
      );
    }

    takePicture = async function() {
      if (this.camera) {

        const options = { quality: 0.5, base64: true };
        const data = await this.camera.takePictureAsync(options);

        Actions.ProfilePage({imagePath:data.uri,
          selectedIndex:this.state.selectedIndex,
          shapes:this.state.shapes 
    });
      }
    };
  }

我没有上传Firebase，版本反应：16.4.1，反应本机：0.56.0， react-native-camera：1.12.0， react-native-firebase：5.2.3 react-native-router-flux：4.0.1

Answer 1

简直不敢相信>> < 如果您已正确设置项目以包含Firebase

takePicture = async() => {
    if (this.camera) {
        // this code takes the picture
        const options = { quality: 0.5, base64: true };
        const data = await this.camera.takePictureAsync(options);
        // open debug to see the uri of image
        console.log(data.uri);

        // send your data.uri off to firebase! :D
        const processed = await firebase.vision().imageLabelerProcessImage(data.uri, {
            confidenceThreshold: 0.8,
        });

        //Look at your debugger again
        console.log('Label: ', processed);
    }
};

我希望这会有所帮助！

Answer 2

_publish = async () => {

      const imageuri= this.state.imagePath;

      //this is where + how you want your image to be stored into
      const refFile= firebase.storage().ref().child('profile_pic'); 

      refFile.putFile(imageuri)

          .catch(error => {
            console.log(error);
            // Alert.alert('Hey', error);
          });


  }

希望有帮助！

如何将React-Native-Camera拍摄的图像上传到Firebase存储？

2 个答案: