layui图片上传及简单的添加 后台设置
composer安装阿里云第三方插件
composer require aliyuncs/oss-sdk-php
控制器引入阿里云路径
use OSS\OssClient;
use OSS\Core\OssException;
//添加
public function save(Request $request)
{
//接收数据
$param=$request->input();
//验证
$validate=$this->validate($request,[
'username'=>'required',
'password'=>'required'
]);
//添加
$res=Account::create($param);
if ($res){
return redirect(route('index'))->with(['msg'=>'添加成功']);
}else{
return redirect(route('create'))->withErrors(['msg'=>'添加失败']);
}
}
//上传图片到阿里云
public function upfile(Request $request)
{
//获取文件上传的路径 别忘了取config中去配置指定图片本地路径
$file=$request->file('file')->store('','image');
$accessKeyId = "LTAI5t5s5FJEdqgbEtVikhw1";
$accessKeySecret = "5hRfEbliZN6mIFQjctJlSj8A82YsW5";
// Endpoint以杭州为例,其它Region请按实际情况填写。
$endpoint = "http://oss-cn-shanghai.aliyuncs.com";
// 存储空间名称
$bucket= "aliqiang";
// 设置文件名称。
$object = rand(111,222).'.png';
// <yourLocalFile>由本地文件路径加文件名包括后缀组成,例如/users/local/myfile.txt。
$content = "./upfile/image/".$file;
try {
$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
//里面包含上传到阿里云上的图片路径
$path = $ossClient->uploadFile($bucket, $object, $content);
} catch (OssException $e) {
print $e->getMessage();
}
return ['code'=>200,'data'=>$path['info']['url'],'msg'=>'上传成功'];
}
layui前台设置
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" style="width: 100px">
{{-- 设置隐藏域,隐藏的图片路径随着表单一起入库--}}
<input type="hidden" name="image" id="image">
</div>
</div>
layui.use(['form', 'layedit', 'laydate','upload','jquery'], function(){
var form = layui.form
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate
,upload = layui.upload
,$ = layui.$;
//常规使用 - 普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: 'upfile' //改成您自己的上传接口
,method: 'POST'
,data:{
'_token':'{{csrf_token()}}'
}
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//console.log(res.data)
var image = res.data;
$("#image").val(image);
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//监听指定开关
form.on('switch(switchTest)', function(data){
layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
});
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
layui搜索后分页
//列表
public function index(Request $request)
{
//获取每页显示条数和总页数
$page=$request->input('page');
$limit=$request->input('limit');
//接收搜索账号名称
$username=$request->input('username');
$where=[];
if ($username){
$where[]=['username','like',"%$username%"];
}
if ($request->ajax()){
$data=Account::where($where)->paginate($limit,'*','page',$page)->toArray();
//获取总条数
$count=Account::where($where)->count();
return ['code'=>0,'data'=>$data['data'],'count'=>$count,'msg'=>'查询成功'];
}
return view('account.index');
}
前台搜索框搭建
<div class="demoTable">
搜索ID:
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
//搜索
$('.layui-btn').click(function () {
var inputVal = $('.layui-input').val()
table.reload('testReload', {
url: '{{route('index')}}'
// ,methods:"post"
,request: {
pageName: 'page' //页码的参数名称,默认:page
,limitName: 'pageSize' //每页数据量的参数名,默认:limit
}
,where: {
username : inputVal
}
,page: {
curr: 1
}
});
})
分页时,一下两个位置对应上之后才能执行点击搜索进行页面重载