tp5后台上传多图，点击放大，左右切换，删除图片

前端代码：

 <div class="form-group">
                        <div class="layui-upload">
                            <label class="col-sm-2 lable_controller"><span style="color: red">*</span>封面图：</label>
                          <button type="button" class="layui-btn" id="test2">多图片上传</button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                <ul class="layui-upload-list" id="demo2" style="display: flex;margin:0 10px;"></ul>
                            </blockquote>
                        </div>
 </div>

js代码：

<script type="text/javascript">

layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  //多图片上传
  upload.render({
    elem: '#test2'
    ,url: "{:url('/commmon/upload/uploadImg')}"//改成您自己的上传接口
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $("#cover_picture").val(file.data);
        $('#demo2').append('<div  class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; style="width:80px;height: 90px;float: left;margin-right: 5px" class="image-container" id="smallPicContainer' + index + '">' +
                        '<div class="delete-css"><button id="upload_smallPic_' + index + '" style="width: 20px;height: 20px;"><i class="layui-icon ayui-icon-close">' +
                        '</i></button>' +
                        '</div>' +
                        '<img id="showSmallPic' + index + '"   src="'+ result +'" alt="'+ file.data +'" height="110px" width="110px" style="object-fit:cover" class="layui-upload-img"></div>'
                    );
         // $("#test1").html('<img src='+res.data+' alt="" height="110px">');
          $('#demo2').append('<li id="smallPicContainer' + index + '">' +
              '<div class="delete-css"><button id="upload_smallPic_' + index + '" style="width: 20px;height: 20px;margin:0 26px;"><i class="layui-icon ayui-icon-close">' +
              '</i></button>' +
              '</div>' +
              '<i class="toleft layui-icon">《</i><img id="showSmallPic' + index + '" src="'+ result +'" height="110px" width="110px" style="object-fit:cover;margin:0 10px;" class="layui-upload-img"><input type="hidden" name="cover_pics[]" id="cover_pics' + index + '" value=""/><i class="toright layui-icon">》</i></li>'
          );
        //删除某图片
        $("#upload_smallPic_" + index).bind('click', function () {
            $("#smallPicContainer" + index).remove();
            smallPic="";
        });
        //某图片放大预览
        showMedia("showSmallPic" + index, "image", result);
      });
    }
    , done: function (res,index) {
          //上传完毕
          $("#cover_pics" + index).each(function(index,element){
              $(this).val(res.data)
          })
      }
  });
})
function showMedia(id, type, src) {
    var idBar = "#" + id;
    console.log(idBar)
    $(idBar).bind('click', function () {
        var width = $(idBar).width();
        var height = $(idBar).height();
        var scaleWH = width / height;
        var bigH = 500;
        var bigW = scaleWH * bigH;
        if (bigW > 900) {
            bigW = 900;
            bigH = bigW / scaleWH;
        } // 放大预览图片
        if (type == "video") {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: true,
                area: [bigW + 'px', bigH + 'px'], //宽高
                content: "<video width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
            });
        } else {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                shadeClose: true,
                area: [bigW + 'px', bigH + 'px'], //宽高
                content: "<img width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
            });
        }

    });
}
//多图上传点击<>左右移动图片
$('body').on('click','.toleft',function () {
    var li_index = $(this).closest("li").index();
    if(li_index >= 1){
        $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1))
    }
})
$('body').on('click','.toright',function(){
    var li_index = $(this).closest("li").index();
    $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1))
})
</script>

后台控制器代码：

 public function index()
    {
        if(request()->isAjax()){
            $param = input('param.');
            $limit = $param['pageSize'];
            $offset = ($param['pageNumber'] - 1) * $limit;
            $where = [];
            $where['shop_type'] = '1';
            if (!empty($param['searchText'])) {
                $where['title'] = ['like', '%' . $param['searchText'] . '%'];
            }
            $merchants = new MerchantsModel();
            $selectResult = $merchants->getMerchantsByWhere($where, $offset, $limit);
            foreach($selectResult as $key=>$vo){
                $pics = Db::name('shop_pics')->where(['goods_id'=>$vo['id']])->select();
                $arr = array_column($pics,'cover_pics');
                $first = array_shift($arr);
                $selectResult[$key]['thumb'] = '<img src="'.$first.'" alt=""  height="40px">';
                $selectResult[$key]['sold_num'] = Db::name("order")->alias("a")->join("shop_order b","a.order_id = b.order_id")->where(['a.pay_status'=>'1','order_type'=>'8','b.type'=>'1'])->count();
                $selectResult[$key]['disabled'] = ($vo['disabled']=='0')?"<span class='badge badge-info btn disable'>上架</span>":"<span class='badge badge-danger btn disable'>下架</span>";
                $selectResult[$key]['is_hot'] = ($vo['is_hot']=='0')?"<span class='badge badge-info btn is_index'>推荐</span>":"<span class='badge badge-danger btn is_index'>未推荐</span>";
                $selectResult[$key]['price'] = ($vo['sku']=='0')?$selectResult[$key]['price']:Db('shopSku')->where("goods_id",$vo['id'])->order("sku_price")->value('sku_price');
                $selectResult[$key]['sku'] = ($vo['sku']=='0')?"<span class='badge badge-info btn is_index'>统一规格</span>":"<span class='badge badge-danger btn is_index'>多规格</span>";
                $selectResult[$key]['operate'] = showOperate($this->makeButton($vo['id'],$param['pageNumber']));
               
            }
            $return['total'] = $merchants->getAllMerchants($where);  // 总数据
            $return['rows'] = $selectResult;
            return json($return);
        }
        $pageNumber = input("param.pageNumber");
        if(empty($pageNumber)){
            $pageNumber = "1";
        }
        $this->assign('page',$pageNumber);
        return $this->fetch();
    }

添加模型：

public function addMerchants($param)
{
	
    try{
        $result = $this->insert($param,false,true);
        //新增规格
        if($result){
            Db()->startTrans();
            try{
                /*多图上传*/
                foreach($param['cover_pics'] as $k => $v){
                    $pics = [
                        'goods_id' => $result,
                        'cover_pics' => $v,
                    ];
                    Db('shop_pics')->insert($pics);
                }
            	if($param['sku'] == 1){
                    foreach ($param['sku_name'] as $key => $item)
                    {
                        $sku = [
                            'goods_id' => $result,
                            'sku_name' => $item,
                            'sku_price' => $param['sku_price'][$key],
                            'sku_src' => $param['sku_src'][$key],
                            'createtime' => time(),
                            'updatetime' => time(),
                        ];
                        Db('shopSku')->insert($sku);
                    }
            	}
                Db()->commit();
            }catch (Exception $e)
            {
                Db('shop')->where('id',$result)->delete();
                Db()->rollback();
                return msg(-1, '', $e->getMessage());
            }

        }


        if(false === $result){
            // 验证失败 输出错误信息
            return msg(-1, '', $this->getError());
        }else{
            return msg(1, url('shop/shop/index'), '添加商品成功');
        }
    }catch (\Exception $e){
        return msg(-2, '', $e->getMessage());
    }
}

修改模型：

   public function editMerchants($param)
    {
        try{
            ($param['sku'] == 1) && $sku_arr =$param['sku1'];
            unset($param['sku1']);
            $result = $this->update($param);
            if($result)
            {
                Db()->startTrans();
                try{
                    /*多图修改*/
                    Db::name('shop_pics')->where(['goods_id'=>$param['id']])->delete();
                    foreach($param['cover_pics'] as $key => $value){
                        $pics = [
                            'goods_id' => $param['id'],
                            'cover_pics' => $value,
                        ];
                        Db('shop_pics')->insert($pics);
                    }
                	if(isset($param['sku_name'][0]))
                	{
                		 foreach ($param['sku_name'] as $key => $item)
                    {
                        $sku = [
                            'goods_id' => $param['id'],
                            'sku_name' => $item,
                            'sku_price' => $param['sku_price'][$key],
                            'sku_src' => $param['sku_src'][$key],
                            'createtime' => time(),
                            'updatetime' => time(),
                        ];
                        Db('shopSku')->insert($sku);
                    }
                	}
                   
                    if(isset($sku_arr))
                    {
                        foreach ($sku_arr['sku_id'] as $key => $item)
                        {
                            $sku = [
                                'sku_price' => $sku_arr['sku_price'][$key],
                                'sku_src' => $sku_arr['sku_src'][$key],
                                'updatetime' => time(),
                            ];
                            Db('shopSku')->where('id',$item)->update($sku);
                        }
                    }
                    Db()->commit();
                }catch (Exception $e)
                {
                    Db()->rollback();
                    return msg(-1, '', $e->getMessage());
                }
            }


            if(false === $result){
                // 验证失败 输出错误信息
                return msg(-1, '', $this->getError());
            }else{

                return msg(1, url('shop/shop/index'), '编辑商品成功');
            }
        }catch(\Exception $e){
            return msg(-2, '', $e->getMessage());
        }
    }