layui上传图片封装为jquery方法

封装layui上传方法：需要将layui的form，layer，upload与jquery文件引入后才可使用。

var uploadUrl = '你的上传地址';
var form = layui.form;
var layer = layui.layer;
var upload = layui.upload;

/**
 * 封装Layui upload
 * @param ele
 * @param opt
 * @constructor upFile
 */
;(function () {
    let upFile = function (ele, opt) {
        let list_key = $(ele).attr('data-list'); //预览图片列表
        let multiple_key = $(ele).attr('data-multiple'); //是否为多图上传
        let name_key = $(ele).attr('data-name'); //提交给后台的字段
        list_key = '#' + list_key;
        name_key = '#' + name_key;

        this.defaults = {
            elem: $(ele),
            url: uploadUrl, //真实的请求上传文件地址
            method: 'post',
            accpet: 'images',
            multiple: multiple_key,
            before: function (res) {
                layer.load();//上传图片的加载
                res.preview(function (index, file, result) {
                    let list = $(list_key);
                    let imgLength = $(list_key + ' img').length;
                    if (multiple_key == "false" && imgLength > 0) {
                        $(list_key + ' img').attr('src', result); //如果不是多图上传则覆盖原有的
                    } else {
                        let list_keys = $(ele).attr('data-list'); //预览图片列表
                        let name_keys = $(ele).attr('data-name'); //是否为多图上传
                        list.append('<img src="' + result + '" title="点击删除" class="layui-upload-img" data-name="' + name_keys + '" data-list="' + list_keys + '" width="100" height="100" onclick="deleteImgs(this)">');
                    }
                })
            },
            done: function (res) {
                layer.closeAll('loading'); //关闭loading
                let data = res.data;
                if (res.code == 0) {
                    layer.msg(res.msg);
                    return;
                } else {
                    layer.msg(res.msg);
                    if (multiple_key == "true") {
                        $(name_key).val($(name_key).val() + "," + data.url);
                        let value = $(name_key).val();
                        value = value.replace(/^(\s|,)+|(\s|,)+$/g, '');
                        $(name_key).val(value);
                    } else {
                        $(name_key).val(data.url);
                    }
                }
            },
            error: function (res) {
                layer.closeAll('loading'); //关闭loading
                layer.msg(res.msg);
            }
        };
        this.options = $.extend({}, this.defaults, opt);
    };

    //定义原型方法
    upFile.prototype = {
        init: function () {
            let _this = this;
            return layui.use('upload', function () {
                let upload = layui.upload;

                //执行实例
                let uploadInst = upload.render(_this.options);
            });
        }
    };

    //在插件中使用对象
    $.fn.upImages = function (options) {
        let upImages = new upFile(this, options);
        return upImages.init();
    };
})();


//删除图片事件
function deleteImgs(thisImg) {
    let list_key = $(thisImg).attr('data-list'); //预览图片列表
    let name_key = $(thisImg).attr('data-name'); //提交给后台的字段
    list_key = '#' + list_key;
    name_key = '#' + name_key;

    //获取下标
    let index = $(list_key + ' img').index(thisImg);

    let img_val = $(name_key);
    //分割成数组
    let array_img_val = img_val.val().split(',');

    //删除图片
    thisImg.remove();
    //将数组中的对应下标删除
    array_img_val.splice(index, 1);
    //重新赋值并用，隔开
    $(name_key).val(array_img_val.join(','));

    layer.msg('删除成功!');
    return;
}

使用方法：执行效果可自行测试，这里就不贴图片了

<!-- html -->
<div class="layui-input-block">
    <div class="layui-upload-list" id="upload_list">

    </div>
    <input type="hidden" id="carousel_img" name="carousel_img" lay-verify="required" value="">
    <button type="button" class="layui-btn" id="upload" data-multiple="false" data-name="carousel_img" data-list="upload_list">
        <i class="layui-icon">&#xe67c;</i>上传轮播图
    </button>
</div>

<!-- jquery -->
<script>
    $(function () {
        $('#upload').upImages();
    })
</script>