🍁 Ellison`s Blog

  

  • 首页
  • PHP
  • 前端
  • Linux
  • Database
  • Python
  • Java
  • GoLang
  • 其他
  • 见识
  • 随言碎语
  • 登录

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

  • Ellison
  • 2018-05-22 09:42
  • PHP
  • 630
  • Laravel

最近在自己新建的博客后台中使用 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 带过去。

点击分享本文:

本文为 Ellison 个人笔记,文章来自于网络或个人总结,转载无需和我联系,但请注明来自 Ellison`s Blog https://www.ruoxiaozh.com

  • 上一篇: cropper.js 实现裁剪图片并上传(PC端)
  • 下一篇: Laravel 框架中前端如何使用 CSRF
Ellison`s Blog
请先登录后发表评论
  • 最新评论
  • 总共0条评论

加入组织

  • QQ
  • 1. 手 Q 扫左侧二维码

    2. 搜群:650017266

    3. 点击 PHP 技术开发交流

热门标签

  • Laravel (13)
  • Vue (0)
  • Git (2)
  • Nginx (9)
  • Vagrant (2)
  • Docker (0)
  • Composer (0)
  • thinkPHP (1)
  • Yii2 (0)
  • Ubuntu (0)
  • Browser (2)
  • CURL (2)
  • Pjax (1)
  • CORS (7)
  • CSS (2)
  • Editor (1)
  • Life (5)
  • Function (12)
  • PHP 7 (2)
  • MySQL (5)
  • Redis (2)
  • PostgreSQL (6)
  • Markdown (1)
  • API (4)
  • 小程序 (1)
  • JavaScript (1)
  • HTTP (3)
  • SSH (1)
  • GoLang (1)
  • VPS (1)

置顶推荐

Laravel 框架中前端如何使用 CSRF Laravel 5.6 单设备登录 Laravel 5.6 使用 UUID CURL 类封装 Laravel Eloquent 必备的实用技巧 提高安全性的最佳 Nginx 配置 Vagrant SSH 的登录总结 Laravel 跨域解决方案 CORS 跨域的概念与 TP5 的解决方案 MySQL 千万级大数据 SQL 查询优化技巧详解 数据库 30 条军规 JavaScript 判断访问客户端是 PC 端还是移动端 PHP 的笛卡尔积算法实现 API 文档编写 - APIDOC Linux MySQL 定时备份并上传到 git 仓库 Laravel 5.5 之 Api Resource Laravel 实现文章浏览次数统计 如何在 Laravel 项目中使用 Swagger 构建 Api 文档 如何编写基于 Swagger-PHP 的 API 文档 网站加载动画 Markdown 语法说明 见过世面的人,从不说这3句话 PHP7 新特性 - 完结篇 阿里云 Redis 开发规范 Nginx 负载均衡设置 PHP 生成随机红包算法 规范的 README 需要哪些内容 PHP 代码规范之 PSR-2 Ubuntu 14/16 下的 Laravel LNMP 线上环境自动部署脚本 PHP 闭包 不会,找人教你就够了? PHP 新特性 - 命名空间

最新评论

    Githubxinwei
  • Githubxinwei2018-05-29 23:51:34
  • 在用 Algolia DocSearch ...中评论
  • Ellison`s Blog666
    ruoxiao-zh
  • ruoxiao-zh2018-03-06 12:52:29
  • 在细说浏览器输入URL后发生了什么中评论
    MissJiang
  • MissJiang2018-03-05 19:24:56
  • 在细说浏览器输入URL后发生了什么中评论
  • very good !!!
    ruoxiao-zh
  • ruoxiao-zh2018-03-04 08:04:19
  • 在使用 VPS 搭建 JetBrains ...中评论
  • 这个可以有

友情链接

Laravel China 社区 Codecasts EasyWechat Laravel 学院 YiiChina WebYang.NET 刘泓宾博客 Linux 运维笔记 风雪之隅 张宴的博客 泽林博客

  • 本博客主要用于分享日常学习、生活及工作的一些心得总结, 文章源自网络, 如涉及您的利益请联系管理员删除, 联系邮箱:ruoxiaozh@163.com

    Owned By 🍁 Ellison     

  • 有时候,需要回过头思忖一会儿才能把走过的路看清楚,于是惊异于它脉络的清晰。你可以从偶然性看到必然性,又得出性格决定命运、命运影响性格的结论。只是大多数时候,我们是行者,以不同的姿态走过人生,虽然时而回头看清来时的路,却未必能看懂归途。

无需注册,用以下帐号即可直接登录

  • github登录