thinphp5.1,layui及layedit上传到七牛云
时间:2020-01-09
本文章向大家介绍thinphp5.1,layui及layedit上传到七牛云,主要包括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; }); //监听提交 });
原文地址:https://www.cnblogs.com/panziwen/p/12171740.html
- 从javascript脚本混淆说起
- CoreOS etcd3 集群实践
- Spring MVC学习教程之流程表单提交,3步实现这个功能
- PXE 模式启动 CoreOS
- iPXE 模式启动 CoreOS(简单、推荐使用)
- CoreOS 已废弃组件
- Docker Compose version 3 使用详解
- Virtualbox 安装 Alpine Linux
- LinuxKit 使用
- Docker 实践遇到的问题(持续更新)
- GitHub Pages 常见问题
- SpyDealer深度剖析:一个广泛针对中国手机APP进行信息窃取的恶意软件
- Docker + Drone CI/CD 实践
- Petya及Notpetya的核心差异分析
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- webapi批量上传照片(三)(base64)
- 【C++简明教程】找数组或者Vector中最大最小值的索引
- wcf负载均衡简易方案
- 【数字图像处理】旋转图像的几种方法
- C#协变和逆变
- C# base64 和图片互转
- js实现图片资源转化成base64的各种场景
- js input file 转base64
- 算法和数据结构:快速排序
- 算法和数据结构:归并排序
- 算法和数据结构: 二 基本排序算法
- 非中间人就没法劫持TCP了吗?
- HW在即——红队活动之Lnk样本载荷篇
- 用正则表达式修改html字符串的所有div的style样式
- 深入理解 WebSecurityConfigurerAdapter【源码篇】