Using editor How to handle MD uploading pictures?

Recently, I used it in my new blog background Editor.md As an editor for publishing articles , Later, I encountered some problems when uploading pictures , Is not in the submitted form Token, Unable to get Laravel Of VerifyCsrfToken Middleware check . This article will explain how to solve this problem .

Editor.md The main features

• Support “ standard ”Markdown / CommonMark and Github Grammar of style , It can also be transformed into a code editor ;
• Support real-time preview 、 picture （ Cross domain ） Upload 、 Pre formatted text / Code / Table insert 、 Code folding 、 Search for replacement 、 read only mode 、 Custom style theme and multi language syntax highlighting ;
• Support ToC（Table of Contents）、Emoji expression 、Task lists、@ Links, etc. Markdown Extended syntax ;
• Support TeX Scientific formula （ be based on KaTeX）、 flow chart Flowchart and Sequence diagram Sequence Diagram;
• Support identification and parsing HTML label , And support custom filter label resolution , With reliable security and almost unlimited scalability ;
• Support AMD / CMD Modular loading （ Support Require.js & Sea.js）, And support custom extensions ;
• Compatible with mainstream browsers （IE8+） and Zepto.js, And support iPad And so on ;
• Supports custom theme styles ;

Github Download address ：https://github.com/pandao/editor.md

front end js To configure

 /*  To configure 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')}}"
});

Methods and routing

public function uploadimage(Request $request)
    {
        $message='';
        if (!$this->disk->exists('/article')) {
            $message = "article  Folder does not exist , Please create first ";
        }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 = " The file name already exists or the file already exists ";
                }else{
                    if($pic->move($path,$newName)){
                        $url = asset($path.'/'.$newName);
                    }else{
                        $message=" System exception , File save failed ";
                    }
                }
            }else{
                $message = " The file is invalid ";
            }
        }else{
            $message="Not File";
        }

        $data = array(
            'success' => empty($message) ? 1 : 0,  //1： Upload successful  0： Upload failed 
            '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\[email protected]']); });

Upload error

We can see that 500 error , This is from Laravel Of TokenMismatchException Caused by abnormality , That is to say Laravel By default, the anti CSRF, and Editor.md The upload form of does not contain token, That's why this error occurs .

resolvent

When we click upload picture, the upload box will pop up , This is the uploaded form , We can use the debugger to find out that this is a request image-dialog.js, The specific path is editor.md/plugins/image-dialog/image-dialog.js. We can analyze the var dialogContent Variables are modified .

Specific modification code

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 + "' />";
}

• stay if(settings.crossDomainUpload) Add this when it's over 5 Line code , Next , take csrfField Variables are added to the following code .

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>");

• Then add this line of code to the header of the requested page

<meta name="_token" content="{
    { csrf_token() }}"/>

In this way, you can upload the picture again token Take it to .

Link to the original text ：http://blog.kesixin.xin/article/51