使用Dropzone和Laravel获取要上载的图像_Laravel_Laravel 5_Dropzone.js_Dropzone

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

laravel laravel-5

使用Dropzone和Laravel获取要上载的图像,laravel,laravel-5,dropzone.js,dropzone,Laravel,Laravel 5,Dropzone.js,Dropzone,我正在尝试创建一个页面，用户可以在其中添加一个标题，然后上传一个图像或2。我用的是dropzone和Laravel我试着让它看起来与众不同，我让它看起来像我遇到的问题是，我需要向js文件添加一个url，但它总是给我这个错误邮政419身份不明在我的开发工具的预览中 {消息：，异常：Symfony\Component\HttpKernel\exception\HttpException，…} 我知道在拉威尔我会用 {{ csrf_field() }} 我无法将图像上载到控制器中指定的文件夹

我正在尝试创建一个页面，用户可以在其中添加一个标题，然后上传一个图像或2。我用的是dropzone和Laravel我试着让它看起来与众不同，我让它看起来像

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

邮政419身份不明

在我的开发工具的预览中

{消息：，异常：Symfony\Component\HttpKernel\exception\HttpException，…}

我知道在拉威尔我会用

{{ csrf_field() }}

我无法将图像上载到控制器中指定的文件夹，也无法将图像保存到数据库

我想知道的是如何将图像上传到文件夹并保存到数据库

我的刀片：

<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>

我的控制器：

公共函数storeRequest$request { $portfolio=新投资组合； $portfolio->fill$this->getSafeInput$请求；如果$request->hasFile'file' { $names=[]； foreach$request->file'file'为$image { $destinationPath='portfolio_images/'； $filename=$image->getClientOriginalName； $image->move$destinationPath，$filename；数组\u push$names，$filename； } $portfolio->file=json\u编码$names； } $portfolio->save；返回重定向->路由'portfolions.index'； } 我的路线：

路由：：获取“/”，函数{ 返回视图“欢迎”； }; Auth：：路由；路线：：获取“/home”，'HomeController@index“->命名为‘家’； Route:：resource'/PortfolioController'；

我希望我已经正确地解释了，如果我遗漏了任何信息，请告诉我

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

adn也将方法指定为post

您的表单缺少文件上传的enctype，enctype属性指定表单数据提交到服务器时的编码方式。因此，请将该属性添加到表单中：

adn也将方法指定为post

问题是Dropzone会在您删除文件时自动发布它们。但它在发布的请求中不包括任何其他字段，只包括文件。因此，您的CSRF令牌和表单上的所有其他字段都丢失了，Laravel抛出了一个错误

有几种方法可以解决这个问题。也许这里最简单的方法是将CSRF令牌添加到发送处理程序中发布的数据中。委员会：

。。。您可以修改它们，例如添加CSRF令牌

因此，在您的代码中：

//首先，包括传递给该处理程序的第2个和第3个参数 myDropzone.onsending，函数文件，xhr，formData{ //现在，找到您的CSRF令牌 var-token=$input[name=''u-token'].val； //将令牌附加到要发布的formData Dropzone formData。附加“U标记”，标记； //剩下的代码。。。 document.querySelectortotal-progress.style.opacity=1； file.previewElement.querySelector.start.setAttributedisabled，已禁用； }; 请注意，您的CSRF令牌（仍在表单上）现在无效——刚刚处理的POST请求意味着它将被更新。您删除的下一个文件将重新使用相同的令牌，并且将失败

一个更完整的解决方案是完全禁用文件发送，直到点击提交按钮，然后一次发送所有文件和所有表单字段。为此，您必须：

autoProcessQueue=false，接下来，由于队列不是自动处理的，所以在提交表单时必须手动处理它。提交表单时，您需要启动某种事件处理程序：

//提交表单时要激发的事件处理程序 $'form'。在'submit'上，函数E{ //不要让标准表格提交，我们在这里做 e、防止违约； //处理文件队列 myDropzone.processQueue； }; 最后，您需要将您的CSRF令牌和表单中的任何其他字段添加到Dropzone将发布的数据中：

myDropzone.onsending，函数文件，xhr，formData{ //查找表单上的所有输入值变量数据=$'form'。序列化数组； //将它们全部附加到formData Dropzone将发布的 $.eachdata，functionkey，el{ formData.appendel.name，el.value； }; //剩下的代码。。。 document.querySelectortotal-progress.style.opacity=1； file.previewElement.querySelector.start.setAttributedisabled，已禁用； };

有几种方法可以解决这个问题。也许这里最简单的方法是将CSRF令牌添加到发送处理程序中发布的数据中。委员会：

。。。您可以修改它们，例如添加 CSRF令牌

因此，在您的代码中：

一个更完整的解决方案是完全禁用文件发送，直到点击提交按钮，然后一次发送所有文件和所有表单字段。为此，您必须：

autoProcessQueue=false，接下来，由于队列不是自动处理的，所以在提交表单时必须手动处理它。提交表单时，您需要启动某种事件处理程序：

我已经这样做了，但是我仍然得到相同的错误我已经这样做了，但是我仍然得到相同的错误我添加了令牌，我添加了var formData=new formData；但还是一样errors@user3095193我没有建议？如果我没有添加它，那么我得到了一个formData notdefined@user3095193我想你错过了我写的-//首先，包括传递给这个处理程序的第2个和第3个参数-你需要添加xhr和formData作为参数，正如我所展示和描述的。我确实错过了你写的。非常感谢您，您的回答是正确的，帮助了我。我添加了令牌，并添加了var formData=new formData；但还是一样errors@user3095193我没有建议？如果我没有添加它，那么我得到了一个formData notdefined@user3095193我想你错过了我写的-//首先，包括传递给这个处理程序的第2个和第3个参数-你需要添加xhr和formData作为参数，正如我所展示和描述的。我确实错过了你写的。非常感谢你，你的回答是正确的，帮助了我。

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);
};