laravel 上传文件的进度条答案

【问题标题】：progressbar for uploading file in laravellaravel 上传文件的进度条
【发布时间】：2020-11-13 12:11:25
【问题描述】：

我的代码用于输入

<input id="imgages" name="imgages" type="file"  onchange="uploadFile()" />

我的脚本是：

function _(el) {
 return document.getElementById(el);
}

function uploadFile() {
  var file = _("imgages").files[0];
  
  var formdata = new FormData();
  formdata.append("imgages", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php"); 

  ajax.send(formdata);
}

function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}

function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}

function errorHandler(event) {
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
  _("status").innerHTML = "Upload Aborted";
}

我的问题是我如何才能将这部分转换为使用 laravel 的 url 并在这个 ajax 部分中添加 csrf？我的意思是我不知道如何在这个脚本中添加 csrf token laravel。

  ajax.open("POST", "file_upload_parser.php");

【问题讨论】：

标签： laravel input file-upload progress-bar csrf-token

【解决方案1】：

您可以添加您的 html 的 csrf token in the head ...

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

...并使用formData.set('_token', document.querySelector('[name="csrf-token"]').getAttribute('content')) 将其与请求一起发送。

【讨论】：

【解决方案2】：

我发现了我的问题我必须在 formdata.append("images", file); 之后添加令牌；

formdata.append("imgages", file);
formdata.append("_token", '{{ csrf_token() }}');

我在主机中添加了一条存储路径。

【讨论】：