Блог

Я добавил dropzone в форму в laravel, и каждый раз, когда я добавляю изображения, форма немедленно отправляется без моего нажатия на кнопку отправки. Пожалуйста, обратитесь к следующим кодам:

Вот коды из компонента 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 загружается не сразу.