Laravel 和 dropzone 使用 div 和另一个表单输入

Question

我想使用 dropzone 上传带有另一个表单输入的多张图片所以我想要一个 div 在用户点击时显示图像，我还有一个触发表单的按钮。

我有这个但是没用

html:

<div class="col-md-12">
        <h1>Upload Multiple Images using dropzone.js and Laravel</h1>
        {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => '', 'id' => '' ]) !!}

        {!! Form::text('name'); !!}
        <div class="dropzone" id="image-upload">
            <h3>Upload Multiple Image By Click On Box</h3>

            <button type="submit" class="btn btn-success" id="submit-all">
            Enviar files
            </button>
        </div>
        {!! Form::close() !!}
    </div>

降落区：

    Dropzone.autoDiscover = false;

    var imageUpload =  new Dropzone("div#image-upload", { 
        url: "dropzone/store", 
        autoProcessQueue:false,
        uploadMultiple: true,
        maxFilesize:5,
        maxFiles:3,
        acceptedFiles: ".jpeg,.jpg,.png,.gif",

        init: function() {
            var submitButton = document.querySelector("#submit-all")
                //imageUpload = this; // closure

            submitButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                imageUpload.processQueue(); // Tell Dropzone to process all queued files.
            });

            // You might want to show the submit button only when 
            // files are dropped here:
            this.on("addedfile", function() {
              // Show submit button here and/or inform user to click it.
            });

        }

    }

这给了我这个错误： http://127.0.0.1/project/public/dropzone/store 419（未知状态）

我的控制器：

 public function dropzone()
 {
    return view('dropzone-view');
 }

/**
 * Image Upload Code
 *
 * @return void
 */
public function dropzoneStore(Request $request)
{


    $dir = public_path().'/upload/';
    $files = $request->file('file');

    foreach($files as $file){
        $fileName = $file->getClientOriginalName();
        $file->move($dir, $fileName);
    }
}

路线：web.php

Route::get('dropzone', 'HomeController@dropzone');
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'HomeController@dropzoneStore']);

Answer 1

Laravel returns 出现令牌不匹配问题时的 419 响应。您已向您的服务器显示 POST 个文件但未随请求传递 _token 的代码。默认应用的 web 中间件将进行令牌验证，由于没有令牌，将失败并抛出 419。

如果您查看浏览器的开发工具，您自己可能会看到这一点，单击网络选项卡，单击上传文件的 POST 请求，然后单击预览或响应选项卡。

因此您需要随请求一起传递 _token。有很多方法可以做到这一点，但最简单的可能是 what is described in the docs:

将令牌添加到您的 <head>

<meta name="csrf-token" content="{{ csrf_token() }}">

每个 AJAX 请求自动传递它：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Laravel 和 dropzone 使用 div 和另一个表单输入

Laravel and dropzone using div and another form inputs

dropzone.js

laravel-5