需求:
1.利用layui上传控件上传至七牛
2.实现layedit插入图片上传至七牛
实现
前端js上传七牛云需要携带token
1、后端获取token,以PHP为例
public function getQiniuToken(){
require_once ROOT_PATH . '/vendor/qiniu/php-sdk/autoload.php';
// 需要填写你的 Access Key 和 Secret Key
$accessKey = config('accesskey');
$secretKey = config('secretkey');
$domain = config('DOMAIN');
// 构建鉴权对象
$auth = new Auth($accessKey, $secretKey);
$bucket = config('bucket');
$expires = 3600;
//自定义上传回复(非callback模式)凭证
$returnBody = '{"key":"$(key)","hash":"$(etag)","code":"0","msg":"success","data":{"src": "'.$domain.'/$(key)","title": "$(x:name)"}}';//此处为设置json返回格式
$policy = array(
'returnBody' => $returnBody
);
$upToken = $auth->uploadToken($bucket, null, $expires, $policy, true);
//$upToken = $auth->uploadToken($bucket);
echo $upToken;
}
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;
});
//监听提交
});