大家在使用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
具体细节大家自行完善!!