laravel框架中的多图上传

效果图：

前端代码：

<div class="role" onclick="file(this)">
     <img src="" alt="" id="goods_1" class="file" >
     <span style="color: #ccc;">上传图像</span>
     <input type="file"  name="goods_imgs[]" class="file" value="" id="goods1" onchange="le(this)">
</div>
<div class="role" style="display: none" onclick="file(this)">
     <img src="" alt="" id="goods_2" class="file" >
     <span style="color: #ccc;">上传图像</span>
     <input type="file"  name="goods_imgs[]" class="file" value="" id="goods2" onchange="le(this)">
</div>

<div class="role" onclick="copy(this)">
      <span style="color: #ccc;">+</span>
</div>

css样式：

.role input[type='file']{opacity:0;}
.role{border:1px solid #c9cccf;text-align:center;width:200px;height:200px;line-height:200px;font-size:18px;margin-top:15px;float:left;margin-left:5px;}


.role img{width: 198px;height: 198px;display: none;}

 js代码：

<script type="text/javascript">
    //点击圆框时上传图片
    function file(evn) {
        var img_obj = $(evn).children(".file")
        var file_id = $(img_obj[1]).attr("id")
        document.getElementById(file_id).click()
    }


    //点击时复制角色框
    function copy(evn) {
        var obj = $(evn).prev();
        var num =  $(".role").length
        console.log(num)
        $(obj).clone().insertBefore(evn);
        $(obj).css("display","block")
        var img_obj = $(obj).children(".file")
        console.log(img_obj)
        var img_id = $(img_obj[0]).attr("id","goods_"+num)
        var file_id = $(img_obj[1]).attr("id","goods"+num)
    }
    //左侧图像点击时显示图像
    function le(evn){
        var id = $(evn).attr('id');//获取id
        var num = "goods_"+id.substr(5,1);
        var file = event.target.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                var divObj= $(evn).prev()  //获取div的DOM对象
                $(divObj).html("") //插入文件名
                $("#"+num).css("display","block");
                $("#"+num).attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };
        }
    }

</script>

多图上传的方法：

function upload_img($file){
    if(!is_array($file)){
        if ($file->isValid()) {

            // 获取文件相关信息
            $originalName = $file->getClientOriginalName(); // 文件原名
            $ext = $file->getClientOriginalExtension();     // 扩展名
            $realPath = $file->getRealPath();   //临时文件的绝对路径
            $type = $file->getClientMimeType();     // image/jpeg
            if(!in_array($ext,['jpg','jpeg','gif','png']) ) return false;
            // 上传文件
            $filename = date('YmdHis').'-' . uniqid() . '.' . $ext;
            // 使用我们新建的uploads本地存储空间（目录）
            //这里的uploads是配置文件的名称

            //把临时文件移动到指定的位置，并重命名
            $path = public_path().DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR.'goodsImg'.DIRECTORY_SEPARATOR.date('Y').DIRECTORY_SEPARATOR.date('m').DIRECTORY_SEPARATOR.date('d').DIRECTORY_SEPARATOR;


            $bool =  $file->move($path,$filename);

            if($bool){
                $img_path =get_domain(). '/uploads/goodsImg/'.date('Y').'/'.date('m').'/'.date('d').'/'.$filename;
                return $img_path;
            }else{
                return false;
            }
        }
    }else{
        $data = [];
        foreach ($file as $files){
            if ($files->isValid()) {
                // 获取文件相关信息
                $originalName = $files->getClientOriginalName(); // 文件原名
                $ext = $files->getClientOriginalExtension();     // 扩展名
                $realPath = $files->getRealPath();   //临时文件的绝对路径
                $type = $files->getClientMimeType();     // image/jpeg

                if(!in_array($ext,['jpg','jpeg','gif','png']) ) return false;

                // 上传文件
                $file_name = date('YmdHis').'-' . uniqid() . '.' . $ext;
                // 使用我们新建的uploads本地存储空间（目录）
                //这里的uploads是配置文件的名称

                //把临时文件移动到指定的位置，并重命名
                $path = public_path().DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR.'goodsImg'.DIRECTORY_SEPARATOR.date('Y').DIRECTORY_SEPARATOR.date('m').DIRECTORY_SEPARATOR.date('d');
                $bool =  $files->move($path,$file_name);
                if($bool){
                    $img_path = get_domain().'/uploads/goodsImg/'.date('Y').'/'.date('m').'/'.date('d').'/'.$file_name;
                    $data['goods_path'][]=$img_path;
                }else{
                    return false;
                }
            }
        }
        return $data;
    }

}