Question

我整整一天都在努力解决这个问题。每当我想从vue js组件将数据发布到laravel后端时，它都表明请求已中止。我真的看不到我的代码有什么问题。任何帮助是极大的赞赏。我安装了CORS，所以这不是问题。我试图清除路由缓存，但是也没有用。

控制器存储方法。这里是我检查标题是否存在的地方，如果不存在，请继续将故事保存在数据库中：

public function store(
    AuthenticatedUserId $authenticatedUserId,
    CreateNewRecordInDatabase $createNewRecordInDatabase,
    FindDataById $findDataById, 
    RetrieveAllData $retrieveAllData,
    Request $request, 
    $writer
    )
{
    $writer = $findDataById->findDataById(User::class, $writer);

    $stories = $retrieveAllData->retrieveAllData(Story::class);

    foreach ($stories as $check_title) {
        if ($check_title->title == $request->title) {
            return redirect()
                ->route('writer.create', ['writer' => $authenticatedUserId->authId()])
                ->with('title_exists', 'Title already exists');
        }
    }

    $createNewRecordInDatabase->createRecord($writer->stories(), [
        'title' => $request->title,
        'story' => $request->story,
        'published_on' => date('m-d-Y'),
        'category_id' => $request->category_id
    ]);

    return response()->json('success');
}

API路径：

Route::post('/dashboard/writer/{writer}/store', 'Story\StoryController@store');

Vue组件：

<template>
<div class="row">
    <form class="col s12">
        <input type="hidden" name="_token" :value="csrf">

        <div class="row">
            <div class="col s12">
                <input  v-model="title" type="text" 
                        class="input-field" 
                        placeholder="Give it a catchy title" 
                        required
                        >
                <label for="title">Give it a catchy title</label>
            </div>
        </div>

        <div class="row">
            <div class="input-field col s12">
                <select v-model="category_id" name="category_id">
                     <option 
                        v-for="category in categories"
                        v-bind:key="category.id"
                        v-bind:value="category.id"
                        >{{ category.category }}
                     </option>
                </select>
            </div>
        </div>

        <div class="white col s12" id="editorjs"></div>

        <div class="col s12">
            <button @click="publishStory" class="btn waves-effect waves-light">Publish</button>
        </div>
    </form>

</div>

<script>

import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import Link from '@editorjs/link';
import List from '@editorjs/list';
import Quote from '@editorjs/quote';

export default {
    props: ['categories', 'writer'],
    data() {
        return  {
            title: null,
            category_id: null,
            story: [],
            editor: new EditorJS({
                tools: {
                    header: {
                        class: Header,
                        inlineToolbar: true
                    }, 
                    list: {
                        class: List,
                        inlineToolbar: true
                    }, 
                    link: {
                        class: Link,
                        inlineToolbar: true
                    },
                    quote: {
                        class: Quote,
                        inlineToolbar: true
                    }
                }
            }),
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    },
    methods: {
        publishStory() {
            this.editor.save()
            .then(outputData => this.story = outputData.blocks)
            .catch(err => console.log(err))
            axios.post(`http://localhost:8000/api/dashboard/writer/${this.writer}/store`, {
                    title: this.title,  
                    story: this.story,
                    category_id: this.category_id,
                })
                .then(res => console.log(res))
                .catch(err => console.log(err))
        }

    },
    mounted() {}
}
</script>

Answer 1

尝试增加php.ini设置

max_input_time 
upload_max_filesize
post_max_size   
memory_limit
max_input_vars

PHP Truncating POST Data

尝试将数据从Vue JS发布到laravel后端时请求中止

1 个答案: