基于ThinkPHP3.2和layUI的图片上传

首先在服务端写好上传接口。代码如下

class UploadController extends BaseController 
{
    public function uploadImg()
    {
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     './Public/resource/image/'; // 设置附件上传根目录
        $upload->savePath  =     I('savePath'); // 设置附件上传（子）目录
        $width = I("width");   //缩略图宽度
        $height = I("height");  //缩略图高度
        // 上传文件 
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
            $code = -1;
            $msg = $upload->getError();
        }else{// 上传成功
            $code = 1;
            $data = $info;
            $msg = 'success';
            
            $image = new \Think\Image();   //实例化图像类
            $i = $upload->rootPath.$info['file']['savepath'].$info['file']['savename'];  //拼接图片路径
            $image->open($i); //打开图片
            $image->thumb($width,$height)->save($upload->rootPath.$info['file']['savepath']."th_".$info['file']['savename']); //保存缩略图
            $data['thImage'] = $info['file']['savepath']."th_".$info['file']['savename'];  //将缩略图路径添加到返回数据中
        }
        \CDMAjax($code,$data,$msg);  //把code，data，msg以json字符串的格式返回

    }
}

 

前端THML：

<div class="layui-form-item">
                <label class="layui-form-label">上传头像</label>
                <div class="layui-input-block">
                    <img id='avatar' src="" alt="">
                    <button type="button" class="layui-btn layui-btn-primary" id="upload">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <input type="hidden" name="th_avatar" value="">
                    <input type="hidden" name="avatar" value="">
                </div>
            </div>

js：

layui.use('upload', function(){
            var upload = layui.upload;
            
            //执行实例
            var uploadInst = upload.render({
                elem: '#upload' //绑定元素
                ,url: '{:U("Api/Upload/uploadImg")}' //上传接口,
                ,data: {
                    savePath: 'user/avatar/',
                    width:88,
                    height:88
                }
                ,accept: 'images'
                ,size: 3072
                ,done: function(res){
                    //上传完毕回调
                    let file = res.data.file;
                    $('input[name=avatar]').val(file.savepath + file.savename);
                    $('input[name=th_avatar]').val(res.data.thImage);
                    $('#avatar').attr('src', "__PUBLIC__/resource/image/" + res.data.thImage);
                }
                ,error: function(){
                    layer.msg('未知错误。');
                }
            });
        });