Fatal编程技术网
  • php/
  • 如何使用reactjs和php将图像上载到数据库？

如何使用reactjs和php将图像上载到数据库？

php mysql reactjs

如何使用reactjs和php将图像上载到数据库？,php,mysql,reactjs,Php,Mysql,Reactjs,我使用Reactjs创建了一个注册页面，并使用PHP创建了一个API。所以我想通过编码上传图像，但在$u文件上发布图像时显示“未识别索引：id_-proof”。我已经试了很多次了，但还是解决不了。这是我的密码 Signup.js import React, {Component} from 'react' import './Signup.css' import axios from 'axios' class Signup extends Component { state = { f

我使用Reactjs创建了一个注册页面，并使用PHP创建了一个API。所以我想通过编码上传图像，但在$u文件上发布图像时显示“未识别索引：id_-proof”。我已经试了很多次了，但还是解决不了。这是我的密码

Signup.js

import React, {Component} from 'react'
import './Signup.css'
import axios from 'axios'
class Signup extends Component {
state = {
    first_name: '',
    last_name: '',
    password: '',
    date_of_birth: '',
    gender: '',
    id_proof: '',
    address: '',
    mobile: '',
    email: '',
} 
constructor(props)
{
  super(props);
  this.addFormData = this.addFormData.bind(this); 
}

addFormData(e)
{
    e.preventDefault();
    const formData = new FormData();
    formData.append('first_name', this.state.first_name)
    formData.append('last_name', this.state.last_name)
    formData.append('password', this.state.password)
    formData.append('date_of_birth', this.state.date_of_birth)
    formData.append('gender', this.state.gender)
    formData.append('id_proof', this.state.id_proof)
    formData.append('address', this.state.address)
    formData.append('mobile', this.state.mobile)
    formData.append('email', this.state.email)

    var headers = {
      'Content-Type': 'application/json',
      "Access-Control-Allow-Origin": "*"
    }

    axios.post('http://localhost/php-react-rest-api-crud/post.php', formData, headers)
    .then(function (response) {
       //handle success
      console.log(response)
      console.log("success")
  })
  .catch(function (response) {
      //handle error
      console.log(response)
      console.log("sorry")
  });
}

render()
{
    return (
        <div className="main">

            <header className="signup-header">
                <h1 className="h1">Create Account</h1>
            </header>

            <div className="container" >
                <form className="form-wrappers">
                    <table>
                    <tbody>
                      <tr>
                        <td><label className="text">First Name :</label></td>
                        <td><input className="input" type="text" placeholder="First Name" name="firstname" required value={this.state.first_name}
                        onChange={e => this.setState({ first_name: e.target.value })}/></td>
                      </tr>

                      <tr>
                        <td><label className="text">Last Name :</label></td>
                        <td><input className="input" type="text" placeholder="Last Name" name="lastname" required value={this.state.last_name}
                         onChange={e => this.setState({ last_name: e.target.value })}/></td>
                      </tr>


                      <tr>
                        <td><label className="text">Create Password:</label></td>
                        <td><input className="input" type ="password" placeholder="Enter your password" name="password" required value={this.state.password}
                         onChange={e => this.setState({ password: e.target.value })}/></td>
                      </tr>


                       <tr>
                        <td><label className="text">Date of Birth :</label></td>
                        <td><input className="input" type="date" name="dob" required value={this.state.date_of_birth}
                        onChange={e => this.setState({ date_of_birth: e.target.value })}/></td>
                      </tr>


                      <tr>
                        <td><label className="text">Gender :</label></td>
                        <td><input className="input" type="radio" value="female" name="gender" 
                        //value={this.state.gender}
                         onChange={e => this.setState({ gender: e.target.value })}/>Female
                        <input className="input" type="radio" value="male" name="gender" 
                        //value={this.state.gender}
                        onChange={e => this.setState({ gender: e.target.value })}/>Male</td>
                      </tr>


                      <tr>
                        <td><label className="text">ID Proof :</label></td>
                        <td>(Voter ID/Adhaar Card/PAN Card)<input type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" name="id_proof" required value={this.state.id_proof}
                        onChange={e => this.setState({ id_proof: e.target.value })}/></td>
                      </tr>


                      <tr>
                        <td><label className="text">Address :</label></td>
                        <td><textarea className="input" placeholder="Provide Full Address" name="addr" required   value={this.state.address}
                        onChange={e => this.setState({ address: e.target.value })}></textarea></td>
                      </tr>


                      <tr>
                        <td><label className="text">Mobile Number :</label></td>
                        <td><input className="input" placeholder="Enter mobile number" type="tel" pattern="[6789][0-9]{9}" maxLength="10" name="phone" required value={this.state.mobile}
                         onChange={e => this.setState({ mobile: e.target.value })}/></td>
                      </tr>


                      <tr>
                        <td>
                          <label className="text">E-mail :</label>
                        </td>
                        <td>
                          <input type="email" placeholder="Enter e-mail" name="email" required value={this.state.email}
                             onChange={e => this.setState({ email: e.target.value })}/>
                        </td>
                      </tr>

                      </tbody>
                </table>
                <button className="button" onClick={e => this.addFormData(e)}>Save & continue</button>
                </form>

            </div>

        </div>

    );
  }
}

import React，{Component}来自“React”
导入“./Signup.css”
从“axios”导入axios
类注册扩展了组件{
状态={
名字：''，
姓氏：“”，
密码：“”，
出生日期：''，
性别：''，
id\u证明：“”，
地址：''，
手机：''，
电子邮件：“”，
} 
建造师（道具）
{
超级（道具）；
this.addFormData=this.addFormData.bind（this）；
}
addFormData（e）
{
e、 预防默认值（）；
const formData=new formData（）；
formData.append（'first\u name'，this.state.first\u name）
formData.append（'last\u name'，this.state.last\u name）
formData.append（'password'，this.state.password）
formData.append（'date\u of\u birth'，this.state.date\u of\u birth）
formData.append（'gender'，this.state.gender）
formData.append（'id\u-proof'，this.state.id\u-proof）
formData.append（'address'，this.state.address）
formData.append（'mobile'，this.state.mobile）
formData.append（'email'，this.state.email）
变量头={
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”
}
轴心柱http://localhost/php-react-rest-api-crud/post.php，formData，headers）
.然后（功能（响应）{
//成功
console.log（响应）
console.log（“成功”）
})
.catch（函数（响应）{
//处理错误
console.log（响应）
控制台日志（“对不起”）
});
}
render（）
{
返回(
创建帐户
名字：
this.setState（{first_name:e.target.value}）}/>
姓氏：
this.setState（{last_name:e.target.value}）}/>
创建密码：
this.setState（{密码：e.target.value}）}/>
出生日期：
this.setState（{出生日期：e.target.value}）/>
性别：
this.setState（{gender:e.target.value}}/>女性
this.setState（{gender:e.target.value}}/>男性
身份证明：
（选民ID/Adhaar卡/PAN卡）this.setState（{ID\u-proof:e.target.value}）}/>
地址:
this.setState（{address:e.target.value}）}>
手机号码：
this.setState（{mobile:e.target.value}）}/>
电邮：
this.setState（{email:e.target.value}）}/>
this.addFormData（e）}>保存并继续
);
}
}
Post.php

<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: Origin, Content-Type, Authorization, X-Auth-Token');
header("Access-Control-Allow-Methods: GET, POST");

include_once('confi.php');

if($_SERVER['REQUEST_METHOD'] == "POST"){
$first_name = isset($_POST['first_name']) ? mysqli_real_escape_string($conn,$_POST['first_name']) : "";
$last_name = isset($_POST['last_name']) ? mysqli_real_escape_string($conn,$_POST['last_name']) : "";
$password = isset($_POST['password']) ? mysqli_real_escape_string($conn,$_POST['password']) : "";
$date_of_birth = isset($_POST['date_of_birth']) ? mysqli_real_escape_string($conn,$_POST['date_of_birth']) : "";
$gender = isset($_POST['gender']) ? mysqli_real_escape_string($conn,$_POST['gender']) : "";
$id_proof = isset($_POST['id_proof']) ? (mysqli_real_escape_string($conn,$_POST['id_proof'])) : "";
$address = isset($_POST['address']) ? mysqli_real_escape_string($conn,$_POST['address']) : "";
$mobile = isset($_POST['mobile']) ? mysqli_real_escape_string($conn,$_POST['mobile']) : "";
$email = isset($_POST['email']) ? mysqli_real_escape_string($conn,$_POST['email']) : "";

if(getimagesize($_FILES['id_proof']['tmp_name']) == FALSE )
{
    echo "Please select an Image..";
}
else
{   
    $image = addslashes($_FILES['id_proof']['tmp_name']);
    // $name = addslashes($_FILES['id_proof']['name']);
    $image = file_get_contents($image);
    //echo $image;
    $image = base64_encode($image);
    //echo $image;
    saveImg($image);
}
function saveImg($image)
{

$conn = mysqli_connect("localhost", "root", "", "signup");
if(!$conn)
{
    die('Connection error'.mysqli_connect_errno());
}
$sql = "INSERT INTO `farmer_portal`.`signup` (`first_name`, `last_name`, `password`, `date_of_birth`, `gender`, `id_proof`, `address`, `mobile`, `email`) 
VALUES ('$first_name', '$last_name', '$password', '$date_of_birth', '$gender', '$image', '$address', '$mobile', '$email')";

$res = mysqli_query($conn, $sql);

if($res){
    $json = array("status" => 1, "msg" => "Done User added!");
}else{
    $json = array("status" => 0, "msg" => "Error adding user!");
}
}
}else{
$json = array("status" => 0, "msg" => "Request method not accepted");
}

mysqli_close($conn);

/* Output header */
header('Content-type: application/json');
echo json_encode($json);

?>

this.state={
id\u证明：空
}
onChangeHandler=事件=>{
这是我的国家({
id证明：event.target.files[0]
})
}
addFormData（e）
{
e、 预防默认值（）；
const formData=new formData（）；
...
formData.append（'id\u-proof'，this.state.id\u-proof）
...
}
身份证明：
（选民ID/Adhaar卡/PAN卡）

此状态={
id\u证明：空
}
onChangeHandler=事件=>{
这是我的国家({
id证明：event.target.files[0]
})
}
addFormData（e）
{
e、 预防默认值（）；
const formData=new formData（）；
...
formData.append（'id\u-proof'，this.state.id\u-proof）
...
}
身份证明：
（选民ID/Adhaar卡/PAN卡）


尝试使用以下方法：


import React，{Component}来自“React”
从“axios”导入axios
类映像扩展组件{
状态={
名字：''，
姓氏：“”，
密码：“”，
出生日期：''，
性别：''，
id\u证明：“”，
地址：''，
手机：''，
电子邮件：“”，
} 
建造师（道具）
{
超级（道具）；
this.addFormData=this.addFormData.bind（this）；
}
onChange=e=>{
这是我的国家({
id证明：e.target.files[0]
})
}
addFormData（e）
{
e、 预防默认值（）；
const formData=new formData（）；
formData.append（'first\u name'，this.state.first\u name）
formData.append（'last\u name'，this.state.last\u name）
formData.append（'password'，this.state.password）
formData.append（'date\u of\u birth'，this.state.date\u of\u birth）
formData.append（'gender'，this.state.gender）
formData.append（'id\u-proof'，this.state.id\u-proof）
formData.append（'address'，this.state.address）
formData.append（'mobile'，this.state.mobile）
formData.append（'email'，this.state.email）
变量头={
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”
}
轴心柱http://localhost/php-react-rest-api-crud/post.php，formData，headers）
.然后（功能（响应）{
//成功
console.log（响应）
console.log（“成功”）
})
.catch（函数（响应）{
//处理错误
console.log（响应）
控制台日志（“对不起”）
});
}
render（）
{
返回(
创建帐户

this.state = {
   id_proof: null
}

onChangeHandler=event=>{
    this.setState({
        id_proof: event.target.files[0]
    })
}


addFormData(e)
{
    e.preventDefault();
    const formData = new FormData();
    ...
    formData.append('id_proof', this.state.id_proof)
    ...
}

<tr>
    <td><label className="text">ID Proof :</label></td>
    <td>(Voter ID/Adhaar Card/PAN Card)<input type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" name="id_proof" required value={this.state.id_proof}
    onChange={this.onChangeHandler}/></td>
</tr>



import React, {Component} from 'react'
import axios from 'axios'
class Image extends Component {
state = {
    first_name: '',
    last_name: '',
    password: '',
    date_of_birth: '',
    gender: '',
    id_proof: '',
    address: '',
    mobile: '',
    email: '',
} 
constructor(props)
{
  super(props);
  this.addFormData = this.addFormData.bind(this); 
}

onChange = e => {
    this.setState({
        id_proof:e.target.files[0]
    })
 }

addFormData(e)
{
    e.preventDefault();
    const formData = new FormData();
    formData.append('first_name', this.state.first_name)
    formData.append('last_name', this.state.last_name)
    formData.append('password', this.state.password)
    formData.append('date_of_birth', this.state.date_of_birth)
    formData.append('gender', this.state.gender)
    formData.append('id_proof', this.state.id_proof)
    formData.append('address', this.state.address)
    formData.append('mobile', this.state.mobile)
    formData.append('email', this.state.email)

    var headers = {
      'Content-Type': 'application/json',
      "Access-Control-Allow-Origin": "*"
    }

    axios.post('http://localhost/php-react-rest-api-crud/post.php', formData, headers)
    .then(function (response) {
       //handle success
      console.log(response)
      console.log("success")
  })
  .catch(function (response) {
      //handle error
      console.log(response)
      console.log("sorry")
  });
}

render()
{
    return (
        <div className="main">

            <header className="signup-header">
                <h1 className="h1">Create Account</h1>
            </header>

            <div className="container" >
                <form className="form-wrappers">
                    <table>
                    <tbody>
                      <tr>
                        <td><label className="text">First Name :</label></td>
                        <td><input className="input" type="text" placeholder="First Name" name="firstname" required value={this.state.first_name}
                        onChange={e => this.setState({ first_name: e.target.value })}/></td>
                      </tr>

                      <tr>
                        <td><label className="text">Last Name :</label></td>
                        <td><input className="input" type="text" placeholder="Last Name" name="lastname" required value={this.state.last_name}
                         onChange={e => this.setState({ last_name: e.target.value })}/></td>
                      </tr>


                      <tr>
                        <td><label className="text">Create Password:</label></td>
                        <td><input className="input" type ="password" placeholder="Enter your password" name="password" required value={this.state.password}
                         onChange={e => this.setState({ password: e.target.value })}/></td>
                      </tr>


                       <tr>
                        <td><label className="text">Date of Birth :</label></td>
                        <td><input className="input" type="date" name="dob" required value={this.state.date_of_birth}
                        onChange={e => this.setState({ date_of_birth: e.target.value })}/></td>
                      </tr>


                      <tr>
                        <td><label className="text">Gender :</label></td>
                        <td><input className="input" type="radio" value="female" name="gender" 
                        //value={this.state.gender}
                         onChange={e => this.setState({ gender: e.target.value })}/>Female
                        <input className="input" type="radio" value="male" name="gender" 
                        //value={this.state.gender}
                        onChange={e => this.setState({ gender: e.target.value })}/>Male</td>
                      </tr>


                      <tr>
                        <td><label className="text">ID Proof :</label></td>
                        <td>(Voter ID/Adhaar Card/PAN Card)<input type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" name="id_proof"
                        onChange={this.onChange}/></td>
                      </tr>


                      <tr>
                        <td><label className="text">Address :</label></td>
                        <td><textarea className="input" placeholder="Provide Full Address" name="addr" required   value={this.state.address}
                        onChange={e => this.setState({ address: e.target.value })}></textarea></td>
                      </tr>


                      <tr>
                        <td><label className="text">Mobile Number :</label></td>
                        <td><input className="input" placeholder="Enter mobile number" type="tel" pattern="[6789][0-9]{9}" maxLength="10" name="phone" required value={this.state.mobile}
                         onChange={e => this.setState({ mobile: e.target.value })}/></td>
                      </tr>


                      <tr>
                        <td>
                          <label className="text">E-mail :</label>
                        </td>
                        <td>
                          <input type="email" placeholder="Enter e-mail" name="email" required value={this.state.email}
                             onChange={e => this.setState({ email: e.target.value })}/>
                        </td>
                      </tr>

                      </tbody>
                </table>
                <button className="button" onClick={e => this.addFormData(e)}>Save & continue</button>
                </form>

            </div>

        </div>

    );
  }
}

export default Image;