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">&#xe67c;</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;
            });
        
 
            //监听提交
        });