使用 dropzone.js 和 laravel 5 验证 CsrfToken答案

【问题标题】：VerifyCsrfToken with dropzone.js and laravel 5使用 dropzone.js 和 laravel 5 验证 CsrfToken
【发布时间】：2018-07-30 04:41:44
【问题描述】：

我正在使用 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 感到困惑。非常感谢任何帮助。高级感谢

【问题讨论】：

标签： php laravel dropzone

【解决方案1】：

在配置选项中添加标题，如下所示：

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

【讨论】：

不客气。如果您认为这对您有帮助，请不要忘记将其标记为正确的回答。