首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在React Native中通过上传图片来获取数据到php服务器

如何在React Native中通过上传图片来获取数据到php服务器
EN

Stack Overflow用户
提问于 2018-07-17 03:09:12
回答 1查看 10.1K关注 0票数 2

我有一个反应本机项目,从文本输入接收姓名,电子邮件,电话号码,然后插入这些数据到php服务器投掷抓取api,它的工作正常,但我需要使用户能够上传图像,当点击保存按钮所有数据(姓名,电子邮件,电话号码,照片)保存到php服务器投掷api,现在我使用“反应-本机-图像-拾取器”和工作很好,但我不知道如何使用表单数据上传数据抛出api的图像。

这是react原生代码:

代码语言:javascript
复制
 import React, { Component } from 'react';
import {View,Text,StyleSheet,TextInput,TouchableOpacity,Image} from 'react-native';
import ViewDataUsers from './ViewDataUsers';

import ImagePicker from 'react-native-image-picker';

const options={
    title:'select a photo',
    takePhotoButtonTitle:'Take a Photo',
    chooseFrmoLibraryButtonTitle:'Choose from Gallery',
    quality:1
};




class InputUsers extends Component{

//constructor have a state that conatains the properties that will recieve the values from Text Inputes 
    constructor(props){
       super(props) 
        this.state = {
            TextInputName:'',
            TextInputEmail:'',
            TextInputPhoneNumber:'',
            iamgeSource: null,
        }
    }

    selectPhoto(){
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);

            if (response.didCancel) {
              console.log('User cancelled image picker');
            }
            else if (response.error) {
              console.log('ImagePicker Error: ', response.error);
            }
            else {
              let source = { uri: response.uri };
              this.setState({
                iamgeSource: source
              });
            }
          });
    }    

//arrow function that will fire when press on save button to save data in database via API
    InsertUser = ()=>{
        //constant varaibles that equal propertes in state
        const {TextInputName} = this.state;
        const {TextInputEmail} = this.state;
        const {TextInputPhoneNumber} = this.state;

        //API that use fetch to input data to database via backend php script
        fetch('http://192.168.1.7/tr_reactnative/insert.php',{
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
              },
              body: JSON.stringify({
                name : TextInputName,
                email: TextInputEmail,
                phone_number : TextInputPhoneNumber,
            })
          })
          .then((response) => response.json())
          .then((responseJson) => {
           // return responseJson  
             alert(responseJson);
             this.props.navigation.navigate('seconde');      
            })
            .catch((error) => {
                console.error(error);
              });

       //alert('Pressed!!'); 
        }


        ViewUsersList = ()=>{
            this.props.navigation.navigate('seconde');
        }


    render(){
        return(
            <View style ={styles.container}>
                <TextInput
                // value = {this.TextInputName}
                 placeholder = 'Enter Name'   
                 onChangeText = {TextInputValue=>this.setState({TextInputName:TextInputValue}) }  
                 underlineColorAndroid = 'transparent'
                 style = {styles.TextInputStyle}   
                />
                <TextInput
                 //value = {this.TextInputEmail}
                 placeholder = 'Enter E-mail'   
                 onChangeText = {TextInputValue=>this.setState({TextInputEmail:TextInputValue}) }  
                 underlineColorAndroid = 'transparent'
                 style = {styles.TextInputStyle2}   
                />

                <TextInput
                 //value = {this.TextInputPhoneNumber}
                 placeholder = 'Enter Phone Number'   
                 onChangeText = {TextInputValue=>this.setState({TextInputPhoneNumber:TextInputValue}) }  
                 underlineColorAndroid = 'transparent'
                 style = {styles.TextInputStyle2}   
                />

                <Image style={styles.image}
                    source={this.state.iamgeSource != null ? this.state.iamgeSource : require('./image/not_avilable.jpg')}
                />

                <TouchableOpacity style = {styles.TouchableOpacityStyle} onPress={this.selectPhoto.bind(this)}>
                    <Text style = {styles.TextStyle}>Select Photo</Text>
                </TouchableOpacity>        

                <TouchableOpacity activeOpacity = {.4} style = {styles.TouchableOpacityStyle} onPress={this.InsertUser}>
                    <Text style = {styles.TextStyle}>Save</Text> 
                </TouchableOpacity>


                <TouchableOpacity activeOpacity = {.4} style = {styles.TouchableOpacityStyle} onPress={this.ViewUsersList}>
                    <Text style = {styles.TextStyle}>View Users</Text> 
                </TouchableOpacity>
            </View>    
        )
    }
}

const styles = StyleSheet.create ({
    container : {
        alignItems:'center',
        flex:1,
        marginTop:5,
        backgroundColor:'#fff'
    },

    TextInputStyle :{
        textAlign:'center',
        marginBottom:7,
        width:'90%',
        height:40,
        borderWidth:1,
        borderRadius:5,
        borderColor:'#FF5722'    
    },

    TextInputStyle2 :{
        textAlign:'center',
        marginBottom:7,
        marginTop:20,
        width:'90%',
        height:40,
        borderWidth:1,
        borderRadius:5,
        borderColor:'#FF5722'    
    },

    TextStyle : {
        color:'#fff',
        textAlign:'center'
    },

    TouchableOpacityStyle:{
        paddingTop:10,
        paddingBottom:10,
        marginTop:20,
        borderRadius:5,
        marginBottom:7,
        width:'90%',
        backgroundColor:'#00BCD4'
    },

    button:{
        width:250,
        height:50,
        backgroundColor:"#330066"
    },

    text:{
        color:'white',
        fontSize:30,
        textAlign:'center'
    },

    image:{
        width:200,
        height:200,
        marginTop:30
    }

});

export default InputUsers;

这是php脚本:

代码语言:javascript
复制
<?php
    include 'connections.php';
    $json = file_get_contents('php://input');
    $obj = json_decode($json, true);

    $name = $obj['name'];
    $email = $obj['email'];
    $phone_number = $obj['phone_number'];

    if(mysqli_query($link, "INSERT INTO users(name,email, phone_number)VALUES('$name','$email','$phone_number')")){
        echo json_encode('Inserted succesfully');
    }else{
        echo json_encode('insert faild');
    }

    mysqli_close($link);

我需要将所有数据从应用程序发送到php服务器,包括用户点击保存按钮时上传的图像,有帮助吗?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51368625

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档