使用 Dropzone 和 Laravel 获取要上传的图像

Question

我正在尝试创建一个页面，用户可以在其中添加标题，然后上传一张图片或 2 张图片。我正在使用 dropzone 和 Laravel，我试图让它看起来不同，我让它看起来像 http://www.dropzonejs.com/bootstrap.html

我遇到的问题是我需要添加一个 url 到 js 文件，但它一直给我这个错误

POST http://crud.test/portfolios 419 (unknown status)

并在我的开发工具预览中

{message: "", exception: "Symfony\Component\HttpKernel\Exception\HttpException",…}

我知道在 Laravel 中我会使用

{{ csrf_field() }}

我无法将图像上传到我在控制器中指定的文件夹或将图像保存到我的数据库。

我想要的是如何让我的图片上传到文件夹并保存到我的数据库。

我的blade:

<form action="{{ route('portfolios.store') }}">
    {{ csrf_field() }}

    <div class="form-group">
        <label>Title</label>
        <input type="title" name="title" class="form-control">
    </div>

    <div id="actions" class="row">
        <div class="col-lg-7">
            <span class="btn btn-success fileinput-button dz-clickable">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
            </span>

            <button type="button" class="btn btn-info start">
                <i class="glyphicon glyphicon-upload"></i>
                <span>Start upload</span>
            </button>

            <button type="reset" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel upload</span>
            </button>
        </div>

        <div class="col-lg-5">
            <span class="fileupload-process">
                <div id="total-progress" class="progress progress-striped active total-upload-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress=""></div>
                </div>
            </span>
        </div>
    </div>

    <div class="table table-striped files" id="previews">
        <div id="template" class="file-row dz-image-preview">
            <div>
                <span class="preview">
                    <img data-dz-thumbnail />
                </span>
            </div>

            <div>
                <p class="name" data-dz-name></p>
                <strong class="error text-danger" data-dz-errormessage></strong>
            </div>

            <div>
                <p class="size" data-dz-size></p>
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                    <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
                </div>
            </div>

            <div>
                <button class="btn btn-info start">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>

                <button data-dz-remove class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>

                <button data-dz-remove class="btn btn-danger delete">
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

我的main.js:

var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/portfolios", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    uploadMultiple: true,
    previewsContainer: "#previews", // Define the container to display the previews
    clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
});

myDropzone.on("addedfile", function(file) {
    file.previewElement.querySelector(".start").onclick = function() { 
        myDropzone.enqueueFile(file); 
    };
});

myDropzone.on("totaluploadprogress", function(progress) {
    document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
});

myDropzone.on("sending", function(file) {
    document.querySelector("#total-progress").style.opacity = "1";
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});

myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0";
});

document.querySelector("#actions .start").onclick = function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};

document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
};

我的控制器：

public function store(Request $request)
{
    $portfolio = new Portfolio();

    $portfolio->fill($this->getSafeInput($request));

    if($request->hasFile('file'))
    {
        $names = [];
        foreach($request->file('file') as $image)
        {

            $destinationPath = 'portfolio_images/';
            $filename = $image->getClientOriginalName();
            $image->move($destinationPath, $filename);
            array_push($names, $filename); 
        }

        $portfolio->file = json_encode($names);
    }

    $portfolio->save();

    return redirect()->route('portfolios.index');
}

我的路线：

Route::get('/', function () {
    return view('welcome'); 
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::resource('/portfolios', 'PortfolioController');

我希望我解释得当，如果我遗漏了任何信息，请告诉我

Answer 1

您的表单缺少文件上传的 enctype，enctype 属性指定表单数据在提交到服务器时应如何编码。所以将该属性添加到您的表单中：

<form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">

adn 也将方法指定为 post！

Answer 2

问题是当您放下文件时，Dropzone 会自动 POST 您的文件。但它不包含请求中的任何其他字段 POSTs - 仅包含文件。因此，您的 CSRF 令牌丢失了（您表单上的所有其他字段也是如此），并且 Laravel 抛出错误。

有几种解决方法。也许这里最简单的方法是将 CSRF 令牌添加到 POST 在您的 sending() 偶数处理程序中编辑的数据。 Dropzone docs even mention doing exactly this:

... you can modify them (for example to add a CSRF token) ...

因此，在您的代码中：

// First, include the 2nd and 3rd parameters passed to this handler
myDropzone.on("sending", function(file, xhr, formData) {

    // Now, find your CSRF token
    var token = $("input[name='_token']").val();

    // Append the token to the formData Dropzone is going to POST
    formData.append('_token', token);

    // Rest of your code ...
    document.querySelector("#total-progress").style.opacity = "1";
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});

请注意，虽然您的 CSRF 令牌在表单上仍未更改，但现在无效 - 刚刚处理的 POST 请求意味着它将更新。您删除的下一个文件将重新使用相同的令牌，并且它将失败。

一个更完整的解决方案是在您点击提交按钮之前完全禁止发送文件，然后一次发送所有文件和所有表单域。为此，您必须 disable autoProcessQueue:

autoProcessQueue = false,

接下来，由于队列不是自动处理的，您现在必须在提交表单时手动处理它，by firing processQueue()。提交表单时需要某种事件处理程序来触发：

// Event handler to fire when your form is submitted
$('form').on('submit', function(e) {
    // Don't let the standard form submit, we're doing it here
    e.preventDefault();

    // Process the file queue
    myDropzone.processQueue();
});

最后，您需要将表单中的 CSRF 令牌和添加到数据 Dropzone 中 POST:

myDropzone.on("sending", function(file, xhr, formData) {

    // Find all input values on your form
    var data = $('form').serializeArray();

    // Append them all to the formData Dropzone will POST
    $.each(data, function(key, el) {
        formData.append(el.name, el.value);
    });

    // Rest of your code ...
    document.querySelector("#total-progress").style.opacity = "1";
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});

使用 Dropzone 和 Laravel 获取要上传的图像

Getting an image to upload using Dropzone and Laravel

laravel

dropzone.js

laravel-5

dropzone