最近在自己新建的博客后台中使用Editor.md作为发布文章的编辑器,后来在做上传图片的时候遇到了一些难题,就是提交的表单中没有Token,无法通过Laravel的VerifyCsrfToken中间件检查。本文将讲解如何解决这个问题。
Github下载地址:https://github.com/pandao/editor.md
我们可以发现会出现500错误,这是由Laravel 的TokenMismatchException异常导致的,也就是Laravel默认开启了防CSRF,而Editor.md 的上传表单中并没有包含token,所以才会出现这个错误。
当我们点击上传图片的时候会弹出上传框,这个就是上传的表单,我们可以用调试器查出这是请求了image-dialog.js,具体路径为editor.md/plugins/image-dialog/image-dialog.js。我们可以对其中的var dialogContent变量进行就修改。
具体的修改代码
if (settings.crossDomainUpload) { action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid; } var csrfToken = $('meta[name="_token"]').attr('content'); var csrfField = ""; if (csrfToken) { csrfField = "<input type='hidden' name='_token' value='" + csrfToken + "' />"; } 在if(settings.crossDomainUpload)结束后加上这5行代码,接下来,将csrfField 变量加入到下面的代码中。 var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action + "\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) + ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) + "<label>" + imageLang.url + "</label>" + "<input type=\"text\" data-url />" + (function () { return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" + "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" + csrfField + "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" + "</div>" : ""; })() + "<br/>" + "<label>" + imageLang.alt + "</label>" + "<input type=\"text\" value=\"" + selection + "\" data-alt />" + "<br/>" + "<label>" + imageLang.link + "</label>" + "<input type=\"text\" value=\"http://\" data-link />" + "<br/>" + csrfField + ( (settings.imageUpload) ? "</form>" : "</div>"); 然后在请求的页面头部加上这行代码 <meta name="_token" content="{{ csrf_token() }}"/>这样再次请求上传图片就可以把token带过去。
原文链接:http://blog.kesixin.xin/article/51