使用laravel中的表单放置区域

如何解决使用laravel中的表单放置区域

我在laravel中以表单的形式添加了dropzone，每次添加图像时，表单都会立即提交，而无需单击提交按钮。请参考以下代码：

以下是dropzone vue组件中的代码

<template>
<div class="container" ref="imageUpload">
    <div class="row justify-content-center mb-3">
        <div class="col-12 bg-dark text-white rounded py-3 my-2 text-center">
            DROP IMAGE(S) HERE
        </div>
    </div>
</div>

</template>

<script>
    import Dropzone from 'dropzone';

    export default {
        data: function () {
            return{
                dropzone: null
            }
        },mounted() {
            this.dropzone = new Dropzone(this.$refs.imageUpload,{
                url: '/blog'
            });
        }
    }
</script>

以下是BlogsController.php中的代码：

    public function store(Request $request)
{
    if(! is_dir(public_path('blog_images'))){
        mkdir(public_path('/blog_images'),0777);
    }
    $blogimages = Collection::wrap( request()->file('file'));

    $blogimages->each(function($blogimage){
        $basename = Str::random();
        $original = $basename . '.'. $blogimage->getClientOriginalExtension();

        $blogimage->move(public_path('/blog_images'),$original);

        Blog::create([
            'original' => '/blog_images/' . $original,]);

    });
    $blog = Blog::create($this->validateRequest());

    return view('blog.index');
}


public function validateRequest()
{
    return request()->validate([
        'title' => 'required','caption' => 'required',]);
}

这是来自create.blade.php的代码，其中包含以下格式：

<div class="container mt-5 blog-body">
<form action="/blog" method="POST" enctype="multipart/form-data">

    <div class="form-group row">
        <label for="title" class="col-4 col-form-label">Blog Title</label>
        <div class="col-8">
            <input id="title" type="text" class="form-control @error('title') is-invalid @enderror" name="title"
                value="{{old('title') }}" autocomplete="title" placeholder="Title">
            <div class="text-danger">{{ $errors->first('title') }}</div>
        </div>
    </div>

    <div class="form-group row">
        <label for="caption" class="col-4 col-form-label">Blog Caption</label>
        <div class="col-8">
            <input id="caption" type="text" class="form-control @error('caption') is-invalid @enderror" name="caption"
                value="{{old('caption') }}" autocomplete="caption" placeholder="caption">
            <div class="text-danger">{{ $errors->first('caption') }}</div>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-4 col-form-label">Blog Images</label>
        <div class="col-8" id="app">
            <dropzone-component></dropzone-component>
        </div>
    </div>

        <button type="submit" class="btn btn-primary"> Post Blog</button>
@csrf
</form>

这是来自web.php文件的代码：

Route::resource('blog','BlogsController');

以下是create_blogs_table.php中的代码

Schema::create('blogs',function (Blueprint $table) {
        $table->id();
        $table->timestamps();
        $table->string('original');
        $table->string('title');
        $table->string('caption');
    });

解决方法

您可以设置选项：

autoProcessQueue: false
parallelUploads: 10 

因此Dropzone不会立即上传。