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 配置

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

方法和路由

public function uploadimage(Request $request)
    {
        $message='';
        if (!$this->disk->exists('/article')) {
            $message = "article 文件夹不存在,请先创建";
        }else{
            $pathDir=date('Ymd');
            if(!$this->disk->exists('/article/'.$pathDir)){
                $this->disk->makeDirectory('/article/'.$pathDir);
            }
        }
        if($request->file('editormd-image-file')){
            $path="uploads/article/".$pathDir;
            $pic = $request->file('editormd-image-file');
            if($pic->isValid()){
                $newName=md5(time() . rand(0, 10000)).".".$pic->getClientOriginalExtension();
                if($this->disk->exists($path.'/'.$newName)){
                    $message = "文件名已存在或文件已存在";
                }else{
                    if($pic->move($path,$newName)){
                        $url = asset($path.'/'.$newName);
                    }else{
                        $message="系统异常，文件保存失败";
                    }
                }
            }else{
                $message = "文件无效";
            }
        }else{
            $message="Not File";
        }
        $data = array(
            'success' => empty($message) ? 1 : 0,  //1：上传成功  0：上传失败
            'message' => $message,
            'url' => !empty($url) ? $url : ''
        );
        header('Content-Type:application/json;charset=utf8');
        exit(json_encode($data));
    }

Route::group(['prefix' => 'backend'], function () {
  Route::post('uploadimage',['uses'=>'Backend\UploadController@uploadimage']);
});

上传报错：

我们可以发现会出现 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 带过去。