Laravel - 带有 Dropzone.js 的 Tokenmissmatchexception

Question

我使用 dropzone.js 将图像上传到我的网站，但 Laravel 总是报告 TokenMismatchException，尽管我在表单中使用 Form::open()，它会自动添加 _token。

这是我的代码：

{{ Form::open(["class" => "dropzone", "id" => "imgUpload", "action" => "UploadsController@uploadImage"]) }}
    <div class="fallback">
        {{ Form::submit() }}
    </div>
{{ Form::close() }}

js

Dropzone.options.imgUpload = {
        paramName: "file",
        dictDefaultMessage: "Pošalji sliku",
        acceptedFiles: "image/*",
        previewsContainer: ".dropzone-previews",
        uploadprogress: function(progress, bytesSent){
            console.log(progress);
   }
};

如何解决？

Answer 1

在通过 AJAX 发布时，Dropzone 似乎不包含令牌。你可以使用这样的东西来做到这一点......

Dropzone.options.imgUpload = {
    paramName: "file",
    dictDefaultMessage: "Pošalji sliku",
    acceptedFiles: "image/*",
    previewsContainer: ".dropzone-previews",
    uploadprogress: function(progress, bytesSent) {
        console.log(progress);
    },
    sending: function(file, xhr, formData) {
            // Pass token. You can use the same method to pass any other values as well such as a id to associate the image with for example.
            formData.append("_token", $('[name=_token']).val()); // Laravel expect the token post value to be named _token by default
        }
};

我在这里找到了 sn-p...http://laravel.io/forum/04-17-2014-tokenmismatchexception-with-dropzonejs

通过 AJAX 提交的令牌和表单似乎也存在一些问题。在这种情况下，您需要在初始化 dropzone 时包含额外的标头。

Dropzone.options.imgUpload = {
    paramName: "file",
    dictDefaultMessage: "Pošalji sliku",
    acceptedFiles: "image/*",
    previewsContainer: ".dropzone-previews",
    headers: {
        "X-CSRF-Token": $('[name=_token').val())
    },
    uploadprogress: function(progress, bytesSent) {
        console.log(progress);
    }
};

如果我们通过 AJAX 提交，请修改 filters.php 中的 CSRF 过滤器以检查该标头。

Route::filter('csrf', function() 
{
    $token = Request::ajax() ? Request::header('X-CSRF-Token') : Input::get('_token');

    if (Session::token() != $token) {
        throw new Illuminate\Session\TokenMismatchException;
    }
});