为什么在提交表单时出现500错误？

Question

我想知道为什么在尝试将照片上传到数据库时出现500错误。我感觉我的控制器以及React代码中的axios调用都弄糟了。 Pastebin在下面。如果您需要更多信息，请告诉我。

这里是App.js

import React, {Component} from 'react';
import axios from 'axios';
import Feed from '../components/Feed/Feed';
import Upload from '../components/Upload/Upload';

import ImagePreview from './ImagePreview/ImagePreview';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFile: null,
            previewImgURL: '',
            imgPrev: false,
            success: false,
            progress: 0,
            imageChosen: false,
            pictures: [],
            hideForm: true,
        };
        this.imageUpload = this.imageUpload.bind(this);
        this.submitImageAndRedirect = this.submitImageAndRedirect.bind(this);
        this.postIsClicked = this.postIsClicked.bind(this);
        this.feedView = this.feedView.bind(this);
    }

    imagePreview(newPostImageBool) {
        this.setState({imgPrev: newPostImageBool});

        if (this.state.selectedFile === null) {
            alert("can't preview a picture on this because it's empty");
            this.setState({imgPrev: false});
        }
    };

    closeModal() {
        this.setState({imgPrev: false});
    };

    imageUpload(e) {
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                selectedFile: file,
                previewImgURL: reader.result,
                pictures: [reader.result]
            }, () => {
                console.log(this.state.pictures);
            })
        };

        if (file) reader.readAsDataURL(file); // Allows user to preview image uploaded

        this.setState(() => ({file}));
        this.setState({success: true, imageChosen: true});
    }

    submitImageAndRedirect() {
        // e.preventDefault();
        let picUrl = this.state.previewImgURL;
        axios.post('/home', {
            body: picUrl
        }).then(response => {
            // console
            console.log(response);
            // set state
            this.setState({
                pictures: [picUrl, response.data]
            });
        });

        console.log("submitImageAndRedirect() triggered");
    }

    postIsClicked(e) {
        console.log("postIsClicked(e) triggered");

        if (e.target.value === "Yes") {
            this.feedView();
            this.submitImageAndRedirect();
            console.log(`Yes has been clicked... inside Yes if block`);
        } else {
            alert("No clicked");
        }
    }

    feedView() {
        this.setState({hideForm: false}, () => console.log(this.state.hideForm));
    }

    render() {
        return (
            <div className="feed-wrapper">
                {this.state.success ?
                    <div className="alert alert-success">
                        <strong>Chosen image is successful!
                            Now click Preview and make sure that's the one you want to upload!</strong>
                    </div> : null}

                {this.state.hideForm ?
                    <form onSubmit={this.submitImageAndRedirect}>
                        <div className="inputWrapper">
                            <input
                                id="new_post_image"
                                name="post_image"
                                className="button is-success is-outlined"
                                type="file"
                                style={{display: 'none'}}
                                onChange={this.imageUpload}
                                accept="image/*"
                            />

                            <Upload/>

                            <br/>
                            {
                                this.state.imageChosen ?
                                    <div className="uploaded-pics">
                                        <ImagePreview src={this.state.previewImgURL} onClick={this.postIsClicked}/>
                                    </div> : null
                            }
                        </div>
                    </form>
                    : null
                }

                {!this.state.hideForm ?
                    this.state.pictures.map(post => {
                        return <Feed src={post} />
                    })
                :null}
            </div>
        );
    }
}

export default App;

这里是我的控制器：

<?php

namespace AppHttpControllers;

use AppUser;
use AppPostPictures;
use IlluminateHttpRequest;

class PostPicturesController extends Controller
{
    public function create(Request $request, PostPictures $postPicture) {
        $uploadPic = $postPicture->user()->postPictures->create([
            'body' => $request->body
        ]);

        return response()->json($postPicture->with('user')->find($uploadPic->id));
    }
}

控制台错误：

POST http://mywebsite.test/home 500 (Internal Server Error)

Laravel日志中的错误：

[2019-10-06 16:25:56] local.ERROR: SQLSTATE[42S02]: Base table or view not found: 1146 Table 'mywebsite.post_pictures' doesn't exist (SQL: select * from `post_pictures` where `post_pictures`.`user_id` = 5 and `post_pictures`.`user_id` is not null) {"userId":5,"exception":"[object] (Illuminate\Database\QueryException(code: 42S02): SQLSTATE[42S02]: Base table or view not found: 1146 Table 'mywebsite.post_pictures' doesn't exist (SQL: select * from `post_pictures` where `post_pictures`.`user_id` = 5 and `post_pictures`.`user_id` is not null) at /Users/garenvartanian/workstation/mywebsite/vendor/laravel/framework/src/Illuminate/Database/Connection.php:664, PDOException(code: 42S02): SQLSTATE[42S02]: Base table or view not found: 1146 Table 'mywebsite.post_pictures' doesn't exist at /Users/garenvartanian/workstation/mywebsite/vendor/laravel/framework/src/Illuminate/Database/Connection.php:326)
[stacktrace]