layui+thinkphp5.0实现图片上传

废话不多说,界面代码如下:

HTML

    <div class="layui-upload">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>商品图片
                </label>
                <button type="button" class="layui-btn layui-btn-normal" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" width="202px;" id="url-src">
                    <p id="demoText"></p>
                </div>
    </div>

js

 layui.use('upload', function(){
                var layer = layui.layer;
                var upload = layui.upload;
                upload.render({
                    exts:'jpg|png|gif|bmp|jpeg',
                    field:'url',
                    elem: '#test1'
                    ,url: 'upload'
                    ,done: function(res){
                        console.log(res);
                        if(res.code==0){
                            $("#url-src").attr('src',res.data.src);
                            layer.msg(res.msg,{},function(){
                            });
                        }
                    }
                });
            })

php

       //文件上传
        function upload()
        {
            $file = $this->request->file('url');
            // 移动到框架应用根目录/public/uploads/ 目录下
            if ($file) {
                $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
                if ($info) {
                    $data  = [
                        'code'=>0,
                        'msg'=>'上传成功',
                        'data'=>[
                            'src'=>  '/uploads'.DS.$info->getSaveName(),
                        ]
                    ];
                    echo  json_encode($data);exit;
                }
            }
        }