<!-- html代码-->
<div class="layui-form-item">
    <label class="layui-form-label">上传图片</label>
    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="license-auth-letter-image">
            <i class="layui-icon layui-icon-upload"></i> 点击上次图片
        </button>
        <div style="width: 132px;">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                <div id="ID-upload-demo-text"></div>
            </div>
            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </div>
    </div>
</div>

layui.use(function(){
    var upload = layui.upload;
    var layer = layui.layer;
    var element = layui.element;
    var $ = layui.$;
    // 单图片上传
    var uploadInst = upload.render({
        elem: '#license-auth-letter-image',
        url: '', // 实际使用时改成您自己的上传接口即可。
        accept: 'images',//指定允许上传时校验的文件类型 images 图片类型|file 所有文件类型|video 视频类型|audio 音频类型
        acceptMime: 'image/*',
        exts:'jpg|png|gif|bmp|jpeg', //允许上传的文件后缀
        data: {
            // 传递给上传接口的额外参数
            account: function(){
                return $('input[name="account"]').val();
            },
        },
        before: function(obj){
            // 预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
            });

            element.progress('filter-demo', '0%'); // 进度条复位
            layer.msg('上传中', {icon: 16, time: 0});
        },
        done: function(res){
            // 若上传失败
            if(res.code > 0){
                var demoText = $('#ID-upload-demo-text');
                var htmlContent = '<span style="color: #FF5722;">' + (res.msg ?? '上传失败') + '</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>';
                demoText.html(htmlContent);
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
                return layer.msg(res.msg ?? '上传失败');
            }

            // 上传成功
            $('#ID-upload-demo-text').html(''); // 置空上传失败的状
            // 绑定点击事件,点击图片放大
            openPhotoLayer('#ID-upload-demo-img',res.data.url);
        },
        error: function(){
            // 演示失败状态，并实现重传
            var demoText = $('#ID-upload-demo-text');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        },
        // 进度条
        progress: function(n, elem, e){
            element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
            if(n == 100){
                layer.msg('上传完毕', {icon: 1});
            }
        }
    });
});


// 点击图片放大
var openPhotoLayer = function (element,src) {
    layui.$(element).off('click').on('click', function (){
        layer.photos({
            photos: { // 图片层的数据源
                "id": '#ID-upload-demo-img', // 相册 id
                "data": [   // 相册包含的图片，数组格式
                    {
                        "src": src, // 原图地址
                    },
                ]
            },
        });
    });
}