首页 > Web开发 > 详细

thinphp5.1,layui及layedit上传到七牛云

时间:2020-01-09 16:13:32      阅读:109      评论:0      收藏:0      [点我收藏+]

需求:

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

thinphp5.1,layui及layedit上传到七牛云

原文:https://www.cnblogs.com/panziwen/p/12171740.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!