php - 在 laravel 中使用表单的 dropzone

问题描述

我在 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');
    });

标签： phpmysqllaravelformsdropzone

php - 在 laravel 中使用表单的 dropzone

问题描述

解决方案

推荐阅读