0

Soy nuevo usando react native, estoy creando una aplicación con expo en la cual el usuario pueda seleccionar varias opciones e ingresar un texto, esto funciona perfectamente, pero el problema es cuando quiero enviar una fotografía que se toma directamente desde la cámara del teléfono para luego ser enviada al servidor, primero intente usar RNFetchBlob pero me di cuenta de que no es compatible con expo , intente usar formData para enviar los datos pero siempre aparecía el error "Network Request Failed" a pesar de estar usando la dirección ip de mi equipo (trabajo con localhost) y tener conectado mi dispositivo a la misma red, para obtener la fotografia estoy usando expo-image-picker.

Este es mi codigo:

      constructor(){  
        super();  
        this.state = {  

            selectedItems : [],
            InputDescripcion:'',
            InputUsuarioCorreo:'',
            ready: false,  
           // where: {lat:null, lng:null},  
            latitude: null,
            longitude: null,
            image:null,

            error: null  
        }  
     }

  //Obtener permisos para acceder a camara
    getPermissionAsync = async () => {
        if (Constants.platform.ios) {
          const { status } = await 
    Permissions.askAsync(Permissions.CAMERA_ROLL);
          if (status !== 'granted') {
            alert('Necesitas conceder los permisos para acceder a esta 
                  opcion!');
          }
        }
      }

          //Tomar fotografia
      takePicture = async() =>{
        await Permissions.askAsync(Permissions.CAMERA);
        const {cancelled,uri} = await 
      ImagePicker.launchCameraAsync({allowsEditing:false});
        this.setState({ image:uri})
      }

render(){
    let { image } = this.state;
    return(

                                <Button

                                title="Agregar Imagen"
                                onPress={this.takePicture}
                                />

                                <Button
                                style = {{marginTop:20}}
                                title="Descartar"
                                onPress={this.resetImage}
                                />



                 //Mostrar imagen seleccionada
                        </View>  
                            <View style={{alignSelf:"center"}}>
                                {image &&
                                <Image source={{ uri: image }} style={{ 
                        width: 300, height: 500 }} />}
                           </View>


                        {this.getCurrentPosition}

                        <View style={{marginTop:100, alignSelf:'center'}}>                             
                            <TouchableOpacity style={styles.button}  
                                   onPress={this.InsertItems}>
                                        <Text style={styles.buttonText} > 
                                         Enviar </Text>
                            </TouchableOpacity>  
                          </View>
     );

    }

Este es el metodo que estoy utilizando para enviar la informacion al servidor:

InsertItems = async() => {

    const {selectedItems} = this.state;
    const {InputDescripcion} = this.state;
    const {latitude} = this.state;
    const {longitude} = this.state;
    const {image} = this.state;
    const {InputUsuarioCorreo} = this.state;




    var photo = {
     // uri: image.uri,
      uri: Platform.OS === "android" ? this.state.image : this.state.image.replace("file://", ""),
      type: 'image/jpeg', // or photo.type image/jpg
      name: 'image.jpeg',
    }

   /* data.append('photo', {
      uri: Platform.OS === "android" ? image.uri : image.uri.replace("file://", ""),
      type: 'image/jpeg',
      name: 'photo.jpeg'});*/

    fetch('http://192.168.1.51/911Occidente/insertAlert.php',{
      method: 'post',
      'Accept': 'application/json',
      'Content-type': 'multipart/form-data',
     /* headers:{
          'Accept': 'application/json',
          'Content-type': 'multipart/form-data',


      },*/ body:JSON.stringify({
       TipoAlerta: selectedItems,
       Descripcion: InputDescripcion,
       Latitud : latitude,
       Longitud: longitude,
       UsuarioCorreo:InputUsuarioCorreo,
       Imagen : photo


      })


    })

    .then((response) => response.text())
          .then((responseJson) =>{
              //alert(responseJson);
              if(responseJson == "ok"){
                  // redirigir a la pagina principal luego de que se haya iniciado sesion
                  alert("Alerta enviada con éxito");
                  //this.props.navigation.navigate("VerificationForm");
              }else{
                 // alert("Datos Incorrectos");
                 alert(responseJson);
              }
          })
          .catch((error)=>{
              console.error(error);
          });

    Keyboard.dismiss(); 

  }

Este es mi php

<?php include 'DBconfig.php';

header('Access-Control-Allow-Origin:*');
header('Content-type:application/json');



// Crear conexion
$con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);

$json = file_get_contents('php://input');


$upload_image=$_FILES['Imagen']['name'];

$folder="/xampp/htdocs/911Occidente/Uploads/";

move_uploaded_file($_FILES['Imagen']['tmp_name'], "$folder".$_FILES['Imagen']['name']);

 // Decodificar la informacion recibida y guardarla en la variable $obj
 $obj = json_decode($json,true);

 // Guardar Opciones elegidas en un arreglo a traves del metodo implode, que separa los elementos de un arreglo con comas
 $Array = $obj['TipoAlerta'];
 $TipoAlerta = implode(",",$Array);

 $Descripcion = $obj['Descripcion'];
 $Usuario = $obj['UsuarioCorreo'];

//Obtener fecha actual
$Fecha = date("Y-m-d H:i:s");


//Obtener las variables de latitud y longitud e ingresarlas en la base de datos
$Latitud = $obj['Latitud'];
$Longitud = $obj['Longitud'];



//Insertar en la base de datos
$queryInsert = "insert into Alertas (TipoAlerta,Descripcion,Usuario,Latitud,Longitud,Imagen,ImagenNombre,Fecha) values('$TipoAlerta','$Descripcion','$Usuario','$Latitud','$Longitud','$folder',' $upload_image','$Fecha')";

if(!empty($TipoAlerta) || !empty($Descripcion)){
    $add = mysqli_query($con,$queryInsert);
    if($add){
        echo json_encode('ok');
    }else{
        echo json_encode('Ha ocurrido un error');
    }

}else{   
    echo json_encode('Debes seleccionar o describir la situacion que esta ocurriendo');
}
mysqli_close($con); ?>

Todo se guarda correctamente excepto la imagen, cuando presiono el boton de enviar me aparece el siguiente error tanto en mi dispositivo fisico como en mi emulador:

introducir la descripción de la imagen aquí

No se que puede estar mal, si alguien sabe alguna solucion u otra alternativa, muchas gracias.

1 respuesta 1

0

Lo que dice es que no existe la variable imagen en el objeto o arreglo que estas enviando al servidor puedes usar la funcion:

 `print_r($mivariable);` 

Para debugear un poco lo que te llega desde la app

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.