使用layui.upload遇到的问题

在开发商城后台sku是遇到一个问题，商品发布区域需要在对应的规格颜色添加图片，以便在前台选择的时候显示对应的商品图片，如图

1.png
因为后台使用layui搭建的，自然而然就需要用到自带的upload组件

场景：
图中的表格是通过js一行一行插入的，点击+的时候弹出文件选择框，选择图片后上传成功并将图片的缩略图放到对应框里。
代码：

function uploadImg(dom) {
    // 初始化上传图片组件，否则上传失效
    layui.use(['upload', 'jquery'],function(){
        var upload = layui.upload, //得到 upload 对象
            $ = layui.jquery;
        var className = $(dmo).children('span').attr('class');
        upload.render({
            elem: className
            ,url: "{:U('Productinfo/uploadPicture/path/pad')}"
            ,done: function(res, index, upload){
                //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
                // console.log(res, index, upload);
                imgDom = '<img name="ProductImg" src="'+res.pic+'" data-pic="'+res.pic+'" data-thumb="'+res.thumb+'"/>'
                $(className).html(imgDom)
            }
            ,error: function(index, upload){
                //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                layer.msg('上传失败，请重试', {icon: 5});
            }
        })                  
    });
}

问题：
在+号上添加onclick事件，然后在layui.use中写一个function绑定在window上（window.functionName），需要点击两次+号，文件选择框弹出，选择图片没问题，但是选择后没有上传的回调，图片无法上传。

问题查找：
通过查阅源码，发现layui的upload是通过给elem绑定的对象添加一个<input type="file" />标签，点击+号的时候其实就是点击了input，而正常情况下upload给elem绑定input是在初始化时就完成了，但是自己在使用时并没有进行初始化，而是通过点击事件来进行初始化（第一次点击添加了input，第二次才是点击了input标签），而通过网上查找发现了upload的另一个问题：当layui.upload被重复渲染之后，就会无效，所以点击了两次上传不成功的问题算是找到了。

解决：
把+绑定的点击事件去掉，将uploadImg方法放到添加表格行的点击事件中，提前进行初始化。

2.png