layui 文件上传

前端

       <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
                <input type="hidden" class="file" name="file" id="demoText" value="" >
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="image">
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

<script>
    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: "{:url('test/add/file')}" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#image').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传成功
                if (res.code == 0) {
                    layer.msg('上传成功');
                }
                //上传成功的一些操作
                //……
                $('#demoText').val(res.data); //置空上传失败的状态
            }
            , 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();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>

后台

    public function file()
    {
        $file = request()->file('file');
        if($file){
            $info = $file->validate(['ext'=>'png,jpg,jpeg'])->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                $data['file'] = DS . 'uploads' . DS . $info->getSaveName();
                  //生成缩略图                $image = \think\Image::open('.'.$data['file']);

 //这里是地址，必须拼接这个点不然找不到 $image->thumb(200, 200)->save('.'.$data['file']); }else{ 
 return json(['code'=>500,'msg'=>$file->getError()]) } } return  json(['code'=>0,'msg'=>'成功','data'=>$data['file']]); }

 

 public function save(Request $request)
    {
        $data = input();
        array_shift($data);
        $validate = Loader::validate('Add');

        if(!$validate->check($data)){
            $this->error($validate->getError());
        }
        $res = \app\test\model\Goods::create($data);
        if ($res){
            return  json(['code'=>0,'msg'=>'添加成功','data'=>$res]);
        }else{
            return  json(['code'=>500,'msg'=>'失败'])
        }
    }