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'=>'失敗'])
        }
    }