laravel8 layui阿里云图片上传、搜索后分页

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
                }
            });
        })

分页时，一下两个位置对应上之后才能执行点击搜索进行页面重载