使用ReactJS和Laravel将请求发送到服务器（文件）

Question

this is my first time creating upload file in reactjs and my server is laravel. I have problem regarding uploading files.

I try to use the console to detect if is their changes happen when i upload file. yes probably the file is show in my console.

however in my server i use the hasFile of laravel it says that. No file found.

1. Why No File found server detect
2. Why the status is OK
3. Lastly in my console found that i upload file, but in the server detect that no file found.

My Controller

public function save_home_content(Request $request)
{

    if($request->hasFile('image'))
    {
        echo 'Have File';
    }
    else
    {
        echo 'No File';
    }


}

My Input

<div className="col-md-6" id="file-content">
    <div className="form-group">
        <label htmlFor="exampleFormControlFile1">Image</label>
        <input type="file" 
        name="image"
        onChange={this.handleChangeImage}
        className="form-control-file" 
        accept="image/x-png,image/gif,image/jpeg" 
        id="exampleFormControlFile1"/>
    </div>
</div>

My handle

    handleChangeImage(e){
    this.setState({
        image:e.target.files[0]
    })

    console.log(e.target.files);
}

Axios

        axios.post('/api/save_home_content', this.state.image).then(response => {
        console.log(response);
    }).catch(error => (error.response));

Regards..

Answer 1

for upload image with react js and laravel you must first of all add this encType="multipart/form-data" to the <Form> componenet after that in axios request do like this and add important thing headers: { 'Content-Type': 'multipart/form-data', },

this is result code for upload image with laravel and react js

    var formData = new FormData();
    formData.append('image', this.state.image);
    formData.append('name', this.state.name);
    formData.append('family', this.state.family);
    formData.append('body', this.state.body);
    formData.append('email', this.state.email);
    formData.append('phone', this.state.phone);
    formData.append('subject', this.state.subject);

    axios.post('http://localhost:8000/api/contact_us',
        formData,
        {
            headers: {
                'Content-Type': 'multipart/form-data',
            },

        }
        )}

the key to solving your problem is just add headers: { 'Content-Type': 'multipart/form-data', }, to your axios request hope work for you:)