thinphp5.1,layui及layedit上传到七牛云
需求:
1.利用layui上传控件上传至七牛
2.实现layedit插入图片上传至七牛
实现
前端js上传七牛云需要携带token
1、后端获取token,以PHP为例
public function getQiniuToken() { // 需要填写你的 Access Key 和 Secret Key $accessKey = config("public.qiniu.ACCESSKEY"); $secretKey = config("public.qiniu.SECRETKEY"); // 构建鉴权对象 $auth = new Auth($accessKey, $secretKey); // 要上传的空间 $bucket = config("public.qiniu.BUCKET"); $domain = config("public.qiniu.DOMAIN"); $expires = 3600; //自定义上传回复(非callback模式)凭证 $returnBody = '{"key":"$(key)","hash":"$(etag)","code":"0","msg":"success","data":{"src": "'.$domain.'/$(key)","title": "$(x:name)"}}';//此处为设置json返回格式 $policy = array( 'returnBody' => $returnBody ); $token = $auth->uploadToken($bucket,null,$expires,$policy,true); return $token; }
2.1控件上传示例
上传参数里携带token,而token是从后台获取的
<div class="layui-form-item"> <label class="layui-form-label"><span class="red">*</span>封面</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上传图片 </button> <span class="red suggest">建议比例:210*210dpi,最多一张</span> <div class="layui-upload-list img-box"> <img class="layui-upload-img" id="demo1"> <p id="demoText"></p> </div> </div> </div> <input type="hidden" name="image" id="image"> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="submit">提交</button> </div> </div> </form> </div> <script src="/static/layui/layui.all.js"></script> <script src="/static/jquery/jquery.min.js"></script> <script> layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage , layer = layui.layer; }); var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test1' //绑定元素 , url: 'http://upload-z2.qiniup.com/' //上传接口 , method: 'post' , data: { //key: 'aaa.png', //自定义文件名 token: function(){ var token; $.ajax({ async: false,//ajax 非异步获取taken type: 'post', url: '/a_qiniu_token', success: function (res) { token = res; } }); return token; } } , before: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //图片链接(base64) }); } , done: function (res, index, upload) { console.log(res); //上传成功 if (res.code == 0) { $('#image').val(res.data.src); //return layer.msg('ok'); } } , error: function () { //演示失败状态,并实现重传 return layer.msg('error'); } }); layui.use('form', function () { var form = layui.form , layer = layui.layer; var $ = layui.$; //监听提交 form.on('submit(submit)', function (data) { var data = $('.layui-form').serialize(); var url = "/a_add_reward_good"; $.post( url, data, function (result) { if (result.error == 0) { alert(result.message); setTimeout(function () { var index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引 parent.layer.close(index); //再执行关闭 }, 2000); } else { alert(result.message); } }, "JSON"); return false; }); }); </script>
2.2layedit插入图片
因为layedit上传接口返回格式要求如下,故而需要获取token时,自定义七牛返回数据的格式,如
$returnBody = '{"key":"$(key)","hash":"$(etag)","code":"0","msg":"success","data":{"src": "'.$domain.'/$(key)","title": "$(x:name)"}}';//此处为设置json返回格式
{ "code": 0 //0表示成功,其它失败 ,"msg": "" //提示信息 //一般上传失败后返回 ,"data": { "src": "图片路径" ,"title": "图片名称" //可选 } }
七牛自定义自定义响应内容文档
示例
<script> layui.use(['layedit','form'], function () { layedit = layui.layedit; var $ = layui.$; var form = layui.form; var token; $.ajax({ async: false,//ajax 非异步获取taken type: 'get', url: '/a_qiniu_token', success: function (res) { token = res.token; } }); layedit.set({ uploadImage: { url: 'http://upload-z2.qiniup.com?token=' + token //接口url , type: 'get' //默认post } }); var index = layedit.build('demo'); //建立编辑器 //监听提交 form.on('submit(submit)', function (data) { // var data = $('.layui-form').serialize()+"&"+layedit.getContent(index); console.log(layedit.getContent(index)) return false; }); //监听提交 });