java七牛云头像上传回显_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

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