将 dropzone.js 与 laravel 集成答案

【问题标题】：Integrating dropzone.js with laravel将 dropzone.js 与 laravel 集成
【发布时间】：2016-02-04 14:09:10
【问题描述】：

我正在尝试将 dropzone.js 与 laravel 5 集成，但在尝试 dd($request) 时我得到了空的 FileBag。

在我看来：

<form action="create-submit" class="dropzone" enctype="multipart/form-data">...</form>

我包含了 dropzone.css 和 basic.css，我的 HTML 中也包含了 dropzone.js。

路线：

Route::get('content/create-submit', [
    'as' => 'create-submit', 'uses' => 'ContentController@createSubmit'
]);

控制器：

public function createSubmit (Request $request) {
    dd($request);
}

我错过了什么吗？

有没有简单的解决方案将 dropzone.js 集成到 laravel 中？请帮忙

【问题讨论】：

不太熟悉 dropzone，但您的 form 元素不需要 enctype="multipart/form-data" 并且您的路线需要 post 方法，而不是 get？
它有那部分对不起我忘记写了。已编辑
你是用POST还是GET上传图片和表单数据？由于 GET 被限制为 ~2000 个字符，可能与您的所有其他表单数据相结合，某些内容被截断了？

标签： laravel dropzone.js

【解决方案1】：

你是在 JS 中初始化 dropzone 吗？它应该自动执行此操作，但有时它不会按预期工作。

所以我正在这样做。

<div class="dropzone" id="fileUpload" class="clear">
</div>

<script type="text/javascript" defer="true">
    var token = "{{ Session::getToken() }}";
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("div#fileUpload", {
        url: "{{ route('upload') }}",
        params: {
            _token: token
        }
    });
</script>

在这种情况下，我们也将 CSRF 令牌作为请求的一部分传递。

我建议使用网络开发者工具来查看当上传被发送到服务器时你得到什么响应。

更新控制器代码：

if ($request->hasFile('file') && $request->file('file')->isValid()) {
        $file = $request->file('file');
        dd($file);
}

【讨论】：

尝试了您的解决方案，但没有效果。如何检查文件是否实际上传？在开发人员工具的网络部分，当我将一些图像放在 dropzone 上时，它会显示 data:image/jpeg:base64... 和 data:image/png:base64...。
我已经添加了一部分代码，我的控制器可能会有所帮助。如果您在网络活动中看到这一点并获得 200 OK 作为响应，我希望它能够正常工作。
它不起作用。随着文件上传和网络活动，Dropzone 显示进度条 OK。然后我单击表单上的提交按钮，它通过 if ($request->hasFile('file') && $request->file('file')->isValid()) 并继续。
由于 $request 没有文件变量
这是我在网络活动中得到的： UploadedFile {#31 -test: false -originalName: "multimedija.jpg" -mimeType: "image/jpeg" -size: 145446 -error: 0 path : "/tmp"...

【解决方案2】：

尝试手动初始化您的 dropzone，例如

jQuery(document).ready(function () {    
var myDropzone = new Dropzone("#my-dropzone", { 
                url: "/dropzone",
                headers: {
                   'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,
                }
              });
});

在你的控制器中

public function dropzone(Request $request)
    {
        $img    = $request->file('file'); //access dropzone files   
    }

此外，如果没有通过标头令牌，您可能不会收到任何请求。

更详细的 laravel dropzone 集成可以参考这篇教程Integrating Dropzone.js in Laravel 5 applications

【讨论】：