使用React Native将图像上传到Firebase

Question

我正在尝试将照片上传者设为本机反应的Firebase。我遵循了一个教程，并采用了一对一的代码。但是，在我要执行代码后，一切似乎都可以正常工作，直到必须上传代码，然后出现以下错误：

可能的未处理的承诺拒绝（id：0）：错误：未知错误已经发生了。fn @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2132:45http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:127402:44putFile @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:137147:104uploadImage @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:210966:91touchableHandlePress @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:54240:47touchableHandlePress @ [本地代码]_performSideEffectsForTransition @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:52872:36_performSideEffectsForTransition @ [本地代码]_receiveSignal @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:52798:46_receiveSignal @ [本地代码] touchableHandleResponderRelease @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:52677:26touchableHandleResponderRelease @ [本地代码]invokeGuardedCallbackImpl @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:8997:21invokeGuardedCallback @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9093:42invokeGuardedCallbackAndCatchFirstError @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9097:36executeDispatch @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9204:48executeDispatchesInOrder @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9224:26executeDispatchesAndRelease @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9329:35forEach @ [本地代码]forEachAccumulated @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9319:22runEventsInBatch @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9353:27runExtractedPluginEventsInBatch @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:9441:25http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10467:42batchedUpdates $ 1 @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:21921:20batchedUpdates @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10415:36_receiveRootNodeIDEvent @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10466:23receiveTouches @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:10496:34__callFunction @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2650:49http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2363:31__guard @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2604:15callFunctionReturnFlushedQueue @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2362:21callFunctionReturnFlushedQueue @ [本地代码]

有人熟悉将图像上传到Firebase吗？在本教程中，他们使用uuid，但由于某些原因，当我尝试使用uuid时应用程序中断，因此我将其遗漏了。这是相应的代码：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button, ScrollView, ImageBackground, Dimensions,TouchableOpacity,  FlatList,
  AsyncStorage} from 'react-native';
import { Avatar, ListItem } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-picker';
import firebase from 'react-native-firebase';






const SCREEN_WIDTH = Dimensions.get("window").width;
const list = [
  {
    title: '',
    icon: 'cake',
    url: 'ProfileSettings',
  },


]

const options = {
  title: 'Select Image',
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};

const ImageRow = ({ image, windowWidth, popImage }) => (
  <View>
    <Image
      source={{ uri: image }}
      style={[styles.img, { width: windowWidth / 2 - 15 }]}
      onError={popImage}
    />
  </View>
);




class profileScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      first: '',
      place: '',
      province: '',
      uid: '',
      profileImg: '',
      email: '',
      imgSource: '',
      uploading: false,
      progress: 0,
      images: []

    }
}



getUserData = (user) => {
  console.log(user);
  let ref = firebase.database().ref('Users/' + user);
  ref.on('value' , snapshot =>{
      var state = snapshot.val();
      this.setState({
        first: state.firstname,
        place: state.place,
        province: state.province,
        uid: user,
        profileImg: state.profileImg,
        birthday: state.birthday,
        email: state.email,
        year: state.registered.split("-",1)
      })
    })

}


  componentDidMount(){
    let user = firebase.auth().currentUser;
    console.log(user);
    console.log('test');
    this.getUserData(user.uid); 
    let images;
    AsyncStorage.getItem('images')
      .then(data => {
        images = JSON.parse(data) || [];
        this.setState({
          images: images
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

   /**
   * Select image method
   */
  pickImage = () => {
    ImagePicker.showImagePicker(options, response => {
      if (response.didCancel) {
        console.log('You cancelled image picker 😟');
      } else if (response.error) {
        alert('And error occured: ', response.error);
      } else {
        const source = { uri: response.uri };
        this.setState({
          imgSource: source,
          imageUri: response.uri
        });
        console.log(source);
      }
    });
  };
  /**
   * Upload image method
   */
  uploadImage = () => {
    const ext = this.state.imageUri.split('.').pop();      // Extract image extension
const filename = `unique image' + ${ext}`;             // Generate unique name
const imageRef = firebase.storage().ref('tutorials/images').child(filename +ext);
let mime = 'image/jpg';
imageRef.put(this.state.imageUri, { contentType: mime }).then((snapshot)=>{
    console.log('Image uploaded successfully.')
}).catch((error)=>{
    console.log('Image uploading failed:' + error);
});

  };
  /**
   * Remove image from the state and persistance storage
   */
  removeImage = imageIndex => {
    let images = this.state.images;
    images.pop(imageIndex);
    this.setState({ images });
    AsyncStorage.setItem('images', JSON.stringify(images));
  };



  render() {
    const { uploading, imgSource, progress, images } = this.state;
    const windowWidth = Dimensions.get('window').width;
    const disabledStyle = uploading ? styles.disabledBtn : {};
    const actionBtnStyles = [styles.btn, disabledStyle];
    return (
      <ScrollView  style={styles.scorllVert}>
      <View style={{ alignItems: 'flex-start', justifyContent: 'center', marginBottom: 40 }}>
          <View style={styles.intro}>

          <Text style={styles.introText}>Hoi, ik ben {this.state.first}{"\n"}<Text style={styles.introTextSpan}>Lid geworden in {this.state.year}</Text></Text>

            { this.state.profileImg ?
                <Avatar size="large" rounded source={{uri: this.state.profileImg,}} onPress={() => console.log("Works!")} activeOpacity={0.7} />
                :
                <Avatar size="large" rounded title="GLR" onPress={() => console.log("Works!")} activeOpacity={0.7} />
            }



          </View>
          <View style={styles.divider}>

          </View>
          <View style={styles.about}>
           <Text style={styles.profileName}>Over</Text>
            <View style={styles.aboutLiving}>
              <Icon name='home'  style={styles.icon}/>
              <Text style={styles.aboutText}>Woont in {this.state.place}, {this.state.province}</Text>
            </View>
          </View>

          <View style={styles.divider}>

          </View>
          <View style={styles.about}>
           <Text style={styles.profileName}>Door {this.state.first}  versterkt</Text>
            <View style={styles.aboutLiving}>
              <Icon name='check-circle'  style={[styles.icon, styles.iconGreen]}/>
              <Text style={styles.aboutText}>E-mail adres</Text>
            </View>
          </View>

          <View style={styles.divider}>

          </View>

          <View style={styles.about}>
           <Text style={styles.profileName}>Recente activiteiten</Text>
          <Text >N.v.t.</Text>

          <TouchableOpacity
              style={actionBtnStyles}
              onPress={this.pickImage}
              disabled={uploading}
            >
              <View>
                <Text style={styles.btnTxt}>Pick image</Text>
              </View>
            </TouchableOpacity>

            {imgSource !== '' && (
              <View>
                <Image source={imgSource} style={styles.image} />
                {uploading && (
                  <View
                    style={[styles.progressBar, { width: `${progress}%` }]}
                  />
                )}
                <TouchableOpacity
                  style={actionBtnStyles}
                  onPress={this.uploadImage}
                  disabled={uploading}
                >
                  <View>
                    {uploading ? (
                      <Text style={styles.btnTxt}>Uploading ...</Text>
                    ) : (
                      <Text style={styles.btnTxt}>Upload image</Text>
                    )}
                  </View>
                </TouchableOpacity>
              </View>
            )}

            <View>
              <Text
                style={{
                  fontWeight: '600',
                  paddingTop: 20,
                  alignSelf: 'center'
                }}
              >
                {images.length > 0
                  ? 'Your uploaded images'
                  : 'There is no image you uploaded'}
              </Text>
            </View>
            <FlatList
              numColumns={2}
              style={{ marginTop: 20 }}
              data={images}
              renderItem={({ item: image, index }) => (
                <ImageRow
                  windowWidth={windowWidth}
                  image={image}
                  popImage={() => this.removeImage(index)}
                />
              )}
              keyExtractor={index => index}
            />


          </View>





      </View>
      </ScrollView>

    );
  }


  }

  const styles = StyleSheet.create({
    profileName:{
      fontWeight: 'bold',
      fontSize: 22,
      marginTop: 20,
    },
    list:{
      marginTop: 40,
      width: '100%'
    },intro:{
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'flex-start',
      padding: 25,
      marginBottom: 30,
      paddingTop: 80,
    },
    introText:{
      marginLeft: 0,
      marginRight: 50,
      fontSize: 22,
      fontWeight: "700",
      marginTop:15,
    },
    introTextSpan:{
      marginLeft: 0,
      marginRight: 40,
      fontSize: 15,
      fontWeight: "200",
      marginTop:50,
    },
    divider:{
      width: SCREEN_WIDTH-50,
      padding: 10,
      borderBottomColor: 'grey',
      borderBottomWidth: 0.5,
      marginTop: 10,
      marginLeft: 25
    },
    about:{
      paddingLeft: 25,
    },
    aboutLiving:{
      flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'flex-start',
      paddingTop: 10
    },
    icon:{
      fontSize: 18
    },
    aboutText:{
      marginLeft: 30
    },
    iconGreen:{
      color: 'green'
    }
    ,
    button: {
        marginTop: 30,
        marginBottom: 20,
        paddingVertical: 10,
        alignItems: 'center',
        backgroundColor: '#019BB4',
        width: 300
    },
    buttonText: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#fff'
    },
    scorllVert:{
      marginBottom: 40
    },
    btn: {
      paddingLeft: 20,
      paddingRight: 20,
      paddingTop: 10,
      paddingBottom: 10,
      borderRadius: 20,
      backgroundColor: 'rgb(3, 154, 229)',
      marginTop: 20,
      alignItems: 'center'
    },
    disabledBtn: {
      backgroundColor: 'rgba(3,155,229,0.5)'
    },
    btnTxt: {
      color: '#fff'
    },
    image: {
      marginTop: 20,
      minWidth: 200,
      height: 200,
      resizeMode: 'contain',
      backgroundColor: '#ccc',
    },
    img: {
      flex: 1,
      height: 100,
      margin: 5,
      resizeMode: 'contain',
      borderWidth: 1,
      borderColor: '#eee',
      backgroundColor: '#ccc'
    },
    progressBar: {
      backgroundColor: 'rgb(3, 154, 229)',
      height: 3,
      shadowColor: '#000',
    }
  })



  export default profileScreen;

我对本机做出反应还很陌生，想上传图片，有没有人可以帮助我完成此任务？即使还有其他方法，我也可以接受！

Answer 1

尝试将您的uploadImage函数包装在try..catch中，看看能否在catch中获得更清晰的错误消息

Answer 2

尝试使用此代码上传图像，

const ext = this.state.imageUri.split('.').pop();      // Extract image extension
const filename = `unique image' + ${ext}`;             // Generate unique name
const imageRef = firebase.storage().ref('tutorials/images).child(filename +ext);
let mime = 'image/jpg';
imageRef.put(this.state.imageUri, { contentType: mime }).then((snapshot)=>{
    console.log('Image uploaded successfully.')
}).catch((error)=>{
    console.log('Image uploading failed');
});