layui 单图上传

今天分享一个基于layui和tp5.1的的单图上传，带预览和删除

代码：

html

首先要引入layui插件，下载地址：http://www.layui.com
<div class="layui-form-item" id="pics">
        <div class="layui-form-label">轮播图片</div>
        <div class="layui-input-block" style="width: 70%;">
            <a id="btn-thumb">
                <img src="__STATIC__/images/upload.png" id="thumb-preview" width="60" height="60" style="cursor:pointer;border: 1px solid #f6f6f6;padding: 3px" />
            </a>
            <span class="x-red layui-word-aux">尺寸为1920X500px</span>
            <div id="tips-thumb"></div>
            <input type="hidden" name="image" id="input-thumb" value="">
        </div>
    </div>

js部分

先介绍上传部分：
<script>
    layui.use('upload', function(){
            var $ = layui.jquery;
      var upload = layui.upload;    
            
            var uploadInst = upload.render({
        elem: '#btn-thumb',
        url: '/api/upload/indexone', //上传接口
        exts: 'jpg|png|jpeg',
        before: function(obj) {
            obj.preview(function(index, file, result) {
                $('#thumb-preview').attr('src', result);
            });
        },
        done: function(res) {
            console.log(res);
            if (res.code == 0) {
                return layer.msg(res.message);
            }
            $('#input-thumb').val(res.filepath);
        }
    });
 });
 </script> 

下面代码是异步提交到后端的js代码
<script>
      layui.use(['layer', 'form'], function() {
          var layer = layui.layer,
              $ = layui.jquery,
              form = layui.form;
       form.on('submit(sendData)', function(data) {
        var i;
        $.ajax({
            url: '{:url("yms/link/save")}',
            type: 'POST',
            async: true,
            cache: false,
            data: data.field,
            beforeSend: function() {
                i = showLoad();
            },
            success: function(res) {
                if (res.code == 1) {
                    closeLoad(i);
                    showSuccess(res.msg);
                } else {
                    closeLoad(i);
                    layer.alert(res.msg);
                }

            }
        })
        return false;
    });
      });
    </script>

ThinkPHP5.1-公共控制器上传部分

// 单图
    public function indexone()
    {
        if($this->request->isPost()){
             $res['code']=1;
             $res['msg'] = '上传成功！';
             $file = $this->request->file('file');
             $info = $file->rule('uniqid')->move( '../public/uploads');
             if($info){
                 $res['name'] = $info->getFilename();
                 $res['filepath'] = '/uploads/'.str_replace('\\','/',$info->getSaveName());
             }else{
                 $res['code'] = 0;
                 $res['msg'] = '上传失败！'.$file->getError();
             }
             return $res;
        }
    }

ThinkPHP5.1-控制器入库操作

/**
     * 轮播添加 数据处理
     */
    public function save(){
        if(request()->isAjax()){
            $data = Request::post();
            $result = BannerModel::create($data);
            if($result){
                return ajaxReturn(1,'添加数据成功！');
            }
            return ajaxReturn(0,'添加数据失败！');
        }else{
            return ajaxReturn(2,'数据读取异常，请刷新后重试~');
        }
    }

模型层采用了静态方法，不了解的可以更换其他方法

不懂得可以评论区见...