laravel 中的 Dropzone 集成答案

【问题标题】：Dropzone integration in laravellaravel 中的 Dropzone 集成
【发布时间】：2017-03-11 08:49:32
【问题描述】：

我在项目中集成 dropzone.js 时遇到问题。我使用 ajax 函数上传图像并返回值。但我收到 302 错误和 csrf 错误。为什么会这样？如何解决这个问题？

我的代码查看页面

<form method="POST" action="{{lurl('post-events')}}"  enctype='multipart/form-data'>
  <label>event title*</label>
  <input type="text" class="form-control" name="name" placeholder="give it a short distinct name">
  <div class="image_drop">
    <!--<img src="images/upload-files-here.png" pagespeed_url_hash="19921898" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"/>
                -->
    <div class="dropzone" id="mydropzone" name="mydropzone">
    </div>
    <p>we recommend usung at least a 2160x1080px(2:1ratio) image thats no
                larger than 10MB learn more.</p>
  </div>
</form>

我用jquery调用ajax。

$("#mydropzone").dropzone({ url: "event-image" });

Route.php

Route::post('event-image','HomeController@getImage1');

控制器功能

public function getImage1() {
  $input = Input::all();
  $rules = array(
    'file' => 'image|max:3000',
  );

  $validation = Validator::make($input, $rules);

  if ($validation->fails()) {
    return Response::make($validation->errors->first(), 400);
  }

  $file = Input::file('file');
  $extension = File::extension($file['name']);
  $directory = public_path().'/uploads/pictures/events';
  $filename = sha1(time().time()).".{$extension}";

  $upload_success = Input::upload('file', $directory, $filename);

  if( $upload_success ) {
    return Response::json('success', 200);
  } else {
    return Response::json('error', 400);
  }
}

在我的控制台中我收到此错误

POST http://localhost/Classified/en/event-image  302 Found  
GET http://localhost/Classified/en/events?error=CsrfToken

【问题讨论】：

302 表示永久重定向，表示您的路线被重定向到其他页面

标签： php jquery ajax laravel-5.2 dropzone.js

【解决方案1】：

因为您使用的是标准网络路由，所以 laravel 将强制执行跨站点请求伪造安全性，这意味着每个请求都需要有一个令牌来基本验证登录用户实际上是您。

来自https://laravel.com/docs/5.3/csrf#csrf-x-csrf-token

$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

这会将 csrf-token 值（在 laravel 中的每个请求中自动传递）设置为 x-csrf-token 标头，并允许您的请求具有匹配的令牌。

您也可以禁用 CSRF 令牌或改用 API 路由，但由于安全漏洞我不建议这样做，所以我不会告诉您如何这样做。

编辑：如果您实际上是使用所有表单数据执行调用，您可以简单地添加

{{ csrf_field() }}

到表单，它应该也可以按预期工作。

【讨论】：

【解决方案2】：

我得到了答案

只是把ajax改成

$("#mydropzone").dropzone({ 

        url: "event-image",
        addRemoveLinks : true,
        maxFilesize: 3,
        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
        }

        });

【讨论】：