H5页面基于layui的图片上传

效果图：

html:

 <div class="m_ask_figureCon2  ovH">

            <p class="zm_p">就医证明（0/8）</p>
            <div id="uploadPics">

            </div>

            <span class="pics upload" id="file_block">
                <span>
                    <button class="layui-btn demoMore" id="doctor_prove_upload">就医证明</button>
                </span>
            </span>

        </div>

js:

layui.use('upload', function(){
        var $ = layui.jquery,
            upload = layui.upload;
        
        var img_arr = [];
        var img_num = 0;

        upload.render({
            elem: '#doctor_prove_upload'
            ,url: '<?= Url::to(['file/upload']) ?>'
            ,acceptMime:'image/*'
            ,before: function(obj){
                obj.preview(function (index, file, result) {
                    //当前上传照片数量
                    var current_img_index = ++img_num;
                    var img_html =
                        '<span class="pics" id="pics-'+current_img_index+'" img-index="'+current_img_index+'">'+
                        '<span id="closed" class="closed"></span>'+
                        '<img src="'+ result +'" alt="'+ file.name +'"  style="width: 100%">'+
                        '</span>';
                    if (img_num <= 8) {
                        $('.zm_p').text('就医证明（' + current_img_index +'/8）')
                        $('#uploadPics').append(img_html);
                    } else {
                        $(".seekpop").show().delay(2000).hide(0).children("p").html('就医证明图片不能超过8张');
                    }

                })
            }
            ,done: function(res){ //上传后的回调
                if (res.code == 200){
                    img_arr.push(res.data.file_url);
                    var imgs_str = img_arr.join();
                    $("#doctor_proves").val(imgs_str);
                }else{
                    $(".seekpop").show().delay(2000).hide(0).children("p").html(res.msg);
                }
            }
        });

        //删除上传的图片
        $('body').on('click' , '.closed' , function() {
            var _this = $(this);
            //删除当前点击的图片
            _this.parent().remove();
            //图片数组索引
            var img_index = _this.parent().attr('img-index');
            //删除指定索引图片数组
            img_arr.splice(img_index - 1, 1);
            //更新就医证明数值
            $('.zm_p').text('就医证明（' + --img_num +'/8）')
        });

    });

php:
最后返回图片cdn地址即可