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

【问题标题】：Laravel and dropzone using div and another form inputsLaravel 和 dropzone 使用 div 和另一个表单输入
【发布时间】：2018-03-29 21:02:32
【问题描述】：

我想使用 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/store419（状态未知）

我的控制器：

 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']);

【问题讨论】：

是的，这就是错误，我像这样放在 dropzone 对象中： var myDropzone = new Dropzone("div#image-upload", { headers: { 'X-CSRF-TOKEN': $( 'meta[name="csrf-token"]').attr('content') } )};

标签： laravel-5 dropzone.js

【解决方案1】：

当存在令牌不匹配问题时，Laravel 会返回 419 响应。您显示的代码将文件发布到您的服务器，但没有通过请求传递_token。 web中间件，默认应用，会做token验证，因为没有token，所以会失败并抛出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')
    }
});

【讨论】：