layui中富文本编辑器图片上传（layedit中的uploadImage）

layui

首页 > 前端框架 > layui >

 admin  2017-09-14 09:39:15 

layui中引入富文本编辑器，有个图片上传功能，但是官网文档讲述的比较模糊，所以造成刚接触的人比较困惑，查了他们论坛的好多帖子，也有不少人做了出来，但是都不愿意分享出来！研究了一下午终于研究出来原理，分享出来（我是tp3.2做的）

第一步：首页按照官方文档说明，在后台配置引入文件，这个文档比较详细

layui.use(['form','layedit','element'] 方式引入layedit

创建编辑器：

var layedit = layui.layedit;



  layedit.set({

        uploadImage: {

            url: '{:U("System/upload_img")}',//这是我的接口

            type: 'post',

            dataType:'json',

            success: function(data){

               console.log(data);

            }

        }

   });

  //构建一个默认的编辑器

  var index = layedit.build('mail_content', {

       height: 180 //设置编辑器高度

       }

  );

第二步：如何接收上传的图片
看上面的uploadImage，其实就是一个标准的ajax，只不过只能是post方式，所以我们可以通过success来回调并显示返回的内容！现在最关键的就是我们如何接收图片，并上传他！
官网只给了一句话：

也就是说LayEdit并不提供服务端的图片接受，但你需要在图片上传成功后对LayEdit返回如下格式的JSON信息：

论坛发帖好多都是装逼不愿意真正回复，没有办法只能查看layedit.js源码，发现图片上传的方式是：

"file" name="file">

看到这个的时候你是不是就明白该怎么接收图片了吧！我用的tp3.2是直接引入上传类来实现的

/*处理图片上传*/

    $upload = new \Think\Upload();// 实例化上传类

    $upload->maxSize   =    3145728 ;// 设置附件上传大小

    $upload->exts      =    array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型

    $upload->savePath  =    '/'; // 设置附件上传目录

    $upload->saveName  =    array('date','YmdHis');

    $upload->subName   =    array('date','Ymd');

    $file             =   $upload->upload(array($_FILES['file']));



    $data = __ROOT__."./Uploads".$file[0]['savepath'].$file['0']['savename'];

但是这还没完，按照官网的要求是必须返回一个标准的json，样式是：

{

  "code": 0 //0表示成功，其它失败

  ,"msg": "" //提示信息 //一般上传失败后返回

  ,"data": {

    "src": "图片路径"

    ,"title": "图片名称" //可选

  }

}

刚开始我一直以为是自动返回这种，后来发现需要自己创建数组用来判断这些内容，然后再把数组转换成json返回给编辑器if($data){ //如果上传成功

if($data){

$res['code'] = 0;//0表示成功

            $res['msg'] = "上传成功";

            $res['data']['src'] = $data;//把图片路径复制

            $res['data']['title'] ="图片";

        }else{

            $res['code'] = 1;

            $res['msg'] = "上传失败";

        }

$res = json_encode($res);//把数组转换成json