laravel layui.layedit 富文本图片上传至七牛云并回显

大家在使用layui的富文本编辑器的时候应该需要上传图片，然而layedit 图片上传组件扩展比较少，本人结合php的laravel框架，实现图片上传至七牛云。
关于layui富文本编辑器大家可以参考官方文档https://www.layui.com/doc/modules/layedit.html.
首先上传至七牛云需要携带token参数，但是官方文档

layedit.set({
  uploadImage: {
    url: '' //接口url
    ,type: '' //默认post
  }
});
//注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
layedit.build('demo'); //建立编辑器

并不支持传入data:{token:token}参数，本人想到的解决办法是get传参，这就要求token不能太长。具体如下使用

var token;
    $.ajax({
        async:false,//ajax 非异步获取taken
        type: 'get',
        url: '/api/qiniutoken2',
        success: function (res) {
            token = res.token;
        }
    });
    layedit.set({
        uploadImage: {
            url: 'http://upload-z2.qiniup.com?'+'token=' +token,//接口url
            type: 'post' //默认post
        }
    });
    layedit.build('topicBody'); //建立编辑器

layui要求返回正确的json格式才能会显图片，好在七牛云强大的api支持此方式！
layui要求格式为

{
  "code": 0 //0表示成功，其它失败
  ,"msg": "" //提示信息 //一般上传失败后返回
  ,"data": {
    "src": "图片路径"
    ,"title": "图片名称" //可选
  }
}

依据此格式，我们可以在后台控制器添加相应的api接口，具体php代码如下

public function token2()
    {
        $accessKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
        $secretKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
        $bucket='4vsy';
// 初始化Auth状态
        $auth = new Auth($accessKey, $secretKey);
// 简单上传凭证
        $expires = 3600;
        //自定义上传回复（非callback模式）凭证
        $returnBody = '{"code":"0","msg":"success","data":{"src": "http://image.4vsy.com/$(key)","title": "$(x:name)"}}';//此处为设置json返回格式
        $policy = array(
            'returnBody' => $returnBody
        );
        $upToken = $auth->uploadToken($bucket, null, $expires, $policy, true);
        return ['token'=>$upToken];
    }

编写路由，引用新的接口即可完成！

image.png

具体细节大家自行完善！！