Laravel中使用 Editor.md 上传图片如何处理?

最近在自己新建的博客后台中使用Editor.md作为发布文章的编辑器,后来在做上传图片的时候遇到了一些难题,就是提交的表单中没有Token,无法通过Laravel的VerifyCsrfToken中间件检查。本文将讲解如何解决这个问题。

Editor.md 主要特性

  • 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
  • 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
  • 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
  • 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
  • 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
  • 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
  • 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
  • 支持自定义主题样式;

Github下载地址:https://github.com/pandao/editor.md

前端js配置

  1. /* 配置editormd */
  2. var editor = editormd("editormd", {
  3. path: "{{ asset('/editor.md/lib/') }}",
  4. height: 700,
  5. syncScrolling: "single",
  6. toolbarAutoFixed: false,
  7. saveHTMLToTextarea: false,
  8. imageUpload: true,
  9. imageFormats : ["jpg","jpeg","gif","png","bmp","webp"],
  10. imageUploadURL:"{{url('backend/uploadimage')}}"
  11. });

方法和路由

  1. public function uploadimage(Request $request)
  2. {
  3. $message='';
  4. if (!$this->disk->exists('/article')) {
  5. $message = "article 文件夹不存在,请先创建";
  6. }else{
  7. $pathDir=date('Ymd');
  8. if(!$this->disk->exists('/article/'.$pathDir)){
  9. $this->disk->makeDirectory('/article/'.$pathDir);
  10. }
  11. }
  12. if($request->file('editormd-image-file')){
  13. $path="uploads/article/".$pathDir;
  14. $pic = $request->file('editormd-image-file');
  15. if($pic->isValid()){
  16. $newName=md5(time() . rand(0, 10000)).".".$pic->getClientOriginalExtension();
  17. if($this->disk->exists($path.'/'.$newName)){
  18. $message = "文件名已存在或文件已存在";
  19. }else{
  20. if($pic->move($path,$newName)){
  21. $url = asset($path.'/'.$newName);
  22. }else{
  23. $message="系统异常,文件保存失败";
  24. }
  25. }
  26. }else{
  27. $message = "文件无效";
  28. }
  29. }else{
  30. $message="Not File";
  31. }
  32. $data = array(
  33. 'success' => empty($message) ? 1 : 0, //1:上传成功 0:上传失败
  34. 'message' => $message,
  35. 'url' => !empty($url) ? $url : ''
  36. );
  37. header('Content-Type:application/json;charset=utf8');
  38. exit(json_encode($data));
  39. }
  1. Route::group(['prefix' => 'backend'], function () {
  2. Route::post('uploadimage',['uses'=>'Backend\UploadController@uploadimage']);
  3. });

上传报错

我们可以发现会出现500错误,这是由Laravel 的TokenMismatchException异常导致的,也就是Laravel默认开启了防CSRF,而Editor.md 的上传表单中并没有包含token,所以才会出现这个错误。

解决方法

当我们点击上传图片的时候会弹出上传框,这个就是上传的表单,我们可以用调试器查出这是请求了image-dialog.js,具体路径为editor.md/plugins/image-dialog/image-dialog.js。我们可以对其中的var dialogContent变量进行就修改。

具体的修改代码

  1. if (settings.crossDomainUpload)
  2. {
  3. action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
  4. }
  5. var csrfToken = $('meta[name="_token"]').attr('content');
  6. var csrfField = "";
  7. if (csrfToken) {
  8. csrfField = "<input type='hidden' name='_token' value='" + csrfToken + "' />";
  9. }
  • 在if(settings.crossDomainUpload)结束后加上这5行代码,接下来,将csrfField 变量加入到下面的代码中。
  1. var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action + "\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
  2. ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
  3. "<label>" + imageLang.url + "</label>" +
  4. "<input type=\"text\" data-url />" + (function () {
  5. return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
  6. "<input type=\"file\" name=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
  7. csrfField +
  8. "<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
  9. "</div>" : "";
  10. })() +
  11. "<br/>" +
  12. "<label>" + imageLang.alt + "</label>" +
  13. "<input type=\"text\" value=\"" + selection + "\" data-alt />" +
  14. "<br/>" +
  15. "<label>" + imageLang.link + "</label>" +
  16. "<input type=\"text\" value=\"http://\" data-link />" +
  17. "<br/>" + csrfField +
  18. ( (settings.imageUpload) ? "</form>" : "</div>");
  • 然后在请求的页面头部加上这行代码
  1. <meta name="_token" content="{{ csrf_token() }}"/>

这样再次请求上传图片就可以把token带过去。



评论 3

发表评论


匿名

uuiouiouoiuououoiuo

1年前 · 云南 昆明

匿名

回复 匿名:uuiouiouoiuououoiuo

1年前 · 云南 昆明

匿名

回复 匿名:uuiouiouoiuououoiuo

1年前 · 云南 昆明

Top