layui多图上传，多行数据图片上传

平时在使用layui上传功能，有多个图就会写多个实例去一一对应。现在需要对多行数据的图片进行单个上传，由于数据是从数据库读取的，不能预先设置layui上传组件的实例了。

图片预览区域

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">上传图标</label>
                        <div class="col-sm-9">
                            <input type="hidden" class="form-control" name="icon" id="icon_0">
                            <div class="layui-upload-drag uploadImage" lay-data="{id: '0'}">
                                <div class="layui-hide" id="uploadView_0">
                                    <img src="" style="max-width: 90px">
                                </div>
                            </div>
                        </div>
                    </div>

程序在读取数据后，对数据行进行遍历，使用layui的一些参数配置: lay-data=”{id: ‘0’}” 增加个id索引。隐藏input也增加个id=”icon_0″，方便上传后写入值，预览区域也增加个id=”uploadView_0″，插入预览图片路径。

layui上传组件js代码

    // 图片上传
    layui.use(['upload'], function(){
        var upload = layui.upload;
        //拖拽上传
        upload.render({
            elem: '.uploadImage'
            ,field: 'image'
            ,url: '{:url("common.Upload/image")}'
            ,done: function(res){
                if (res.code == 200) {
                    layui.$('#uploadView_' + this.id).removeClass('layui-hide').find('img').attr('src', res.data.path);
                    layui.$('#icon_' + this.id).val(res.data.path);
                } else {
                    layer.msg(res.message);
                }
            },
            before: function(res){
                this.data.id = this.id;
            }
        });
    });

before 参数配置，用于上传前获取到传入的id标识，后续根据id进行一系列的操作，这样就完成了多行数据的图片上传，仅仅需要一个上传js代码实例。