Laravel和dropzone使用div和另一种形式输入

问题描述：

我想使用dropzone上传多个图像与另一种形式的输入所以我想要一个div显示图像时，用户点击，也我有一个按钮，触发窗体。Laravel和dropzone使用div和另一种形式输入

我有这个，但它不工作

HTML：

<div class="col-md-12"> 
     <h1>Upload Multiple Images using dropzone.js and Laravel</h1> 
     {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => '', 'id' => '' ]) !!} 

     {!! Form::text('name'); !!} 
     <div class="dropzone" id="image-upload"> 
      <h3>Upload Multiple Image By Click On Box</h3> 

      <button type="submit" class="btn btn-success" id="submit-all"> 
      Enviar files 
      </button> 
     </div> 
     {!! Form::close() !!} 
    </div>

悬浮窗：

Dropzone.autoDiscover = false; 

    var imageUpload = new Dropzone("div#image-upload", { 
     url: "dropzone/store", 
     autoProcessQueue:false, 
     uploadMultiple: true, 
     maxFilesize:5, 
     maxFiles:3, 
     acceptedFiles: ".jpeg,.jpg,.png,.gif", 

     init: function() { 
      var submitButton = document.querySelector("#submit-all") 
       //imageUpload = this; // closure 

      submitButton.addEventListener("click", function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       imageUpload.processQueue(); // Tell Dropzone to process all queued files. 
      }); 

      // You might want to show the submit button only when 
      // files are dropped here: 
      this.on("addedfile", function() { 
       // Show submit button here and/or inform user to click it. 
      }); 

     } 

    }

这给了我这个错误： http://127.0.0.1/project/public/dropzone/store 419（未知状态）

myController的：

public function dropzone() 
{ 
    return view('dropzone-view'); 
} 

/** 
* Image Upload Code 
* 
* @return void 
*/ 
public function dropzoneStore(Request $request) 
{ 


    $dir = public_path().'/upload/'; 
    $files = $request->file('file'); 

    foreach($files as $file){ 
     $fileName = $file->getClientOriginalName(); 
     $file->move($dir, $fileName); 
    } 
}

路线：当有一个令牌不匹配问题web.php

Route::get('dropzone', '[email protected]'); 
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'[email protected]']);

是的，这是错误，我把这样的dropzone对象内：var myDropzone = new Dropzone（“div＃ima （'content'） }）}; {header：{0} {0} {0} – Leoh

答

Laravel返回一个响应419。您已将POST文件显示给您的服务器的代码，但未通过_token的请求。默认情况下应用的网络中间件将执行令牌验证，并且由于没有令牌，因此将失败并抛出419.如果您查看浏览器的devtools，则可以自己查看此内容，单击网络选项卡，单击上传文件的POST请求，然后单击预览或响应选项卡。

所以你需要通过一个_token与请求一起。有很多方法可以做到这一点，但最简单的可能是what is described in the docs：

令牌添加到您的<head>

<meta name="csrf-token" content="{{ csrf_token() }}">

与每一个AJAX请求自动传递：

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

感谢您的帮助。别恐慌:) – Leoh

Laravel和dropzone使用div和另一种形式输入

相关推荐