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（身份未知）

myController的：

 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会返回419响应。您显示的代码会将文件POST到您的服务器，但不会传递带有请求的_token。默认情况下应用的Web中间件将执行令牌验证，并且由于没有令牌，因此将失败并抛出419.

如果您查看浏览器的devtools，单击网络选项卡，单击上载文件的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')
    }
});

使用div和另一种形式的Laravel和dropzone输入

1 个答案: