使用 dropzone.js 和 laravel 5 验证 CsrfToken

Posted 2023-05-08

【中文标题】使用 dropzone.js 和 laravel 5 验证 CsrfToken

【英文标题】：VerifyCsrfToken with dropzone.js and laravel 5

【发布时间】：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 感到困惑。非常感谢任何帮助。高级感谢

【参考方案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

【讨论】：

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