php - 使用 dropzone.js 和 laravel 5 验证CsrfToken

Question

我正在使用 dropzone 上传图像。

Javascript 是:

 <script>
  // Get the template HTML and remove it from the doument
  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: "/admin/boats/{{ $boat->id}}/photos", // Set the url

    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually 
 added
    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) {
    // Hookup the start button
    file.previewElement.querySelector(".start").onclick = function() { 
myDropzone.enqueueFile(file); };
  });

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

  myDropzone.on("sending", function(file) {
    // Show the total progress bar when upload starts
    document.querySelector("#total-progress").style.opacity = "1";
    // And disable the start button
    file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
  });

  // Hide the total progress bar when nothing's uploading anymore
  myDropzone.on("queuecomplete", function(progress) {
    document.querySelector("#total-progress").style.opacity = "0";
  });

  // Setup the buttons for all transfers
  // The "add files" button doesn't need to be setup because the config
  // `clickable` has already been specified.
  document.querySelector("#actions .start").onclick = function() {
    myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
  };
  document.querySelector("#actions .cancel").onclick = function() {
    myDropzone.removeAllFiles(true);
  };
</script>

我收到VerifyCsrfToken 错误。我没有使用任何表单标签 - 所以我对如何放置 CsrfToken 或在哪里放置感到困惑。非常感谢任何帮助。感谢高级

Answer 1

在配置选项中添加 header ，如下所示:

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/admin/boats/{{ $boat->id}}/photos", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    //Your other options 
    //...
    //add your headers
    headers: {
        'X-CSRFToken': $('meta[name="token"]').attr('content')
    }
});

如果您的元标记中没有属性标记，请尝试如下操作:

var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: "/admin/boats/{{ $boat->id}}/photos", // Set the url
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    //Your other options 
    //...
    //add your headers
    headers: {
        'X-CSRFToken': '{{ csrf_token() }}'
    }
});

可以引用这个link中的文档Laravel 中的 csrf 和 javascript