layui upload.render上传组件js动态添加html后再次渲染

页面效果


页面代码：

 <!-- 轮播图 -->
                <input type="hidden" name="mcBaunell" id="mc_baunell" value="">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i>*</i>轮播图</label>
                    <div class="layui-input-block" style="width: 100%;" id="mcBaunellDiv">
                    	<div class="mcBaunells" style="width: 200px;text-align: -webkit-center;float: left;margin:0px 5px 5px 0px;">
	                    	<div class="layui-upload-drag mcBaunell" style="margin-bottom: 10px;">
	                            <i class="layui-icon"></i>
	                            <p>点击上传，或将文件拖拽到此处</p>
	                        </div>
	                        <div>
	                         <a type="button" onclick="moveLeft(this);" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe603;</i></a>
                          	 <a type="button" onclick="addDiv(this);"  class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe624;</i></a>
                          	 <a type="button" onclick="deleteDiv(this);" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe640;</i></a>
                          	 <a type="button" onclick="moveRight(this);" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe602;</i></a>
	                        </div>
	                        <input type="hidden" class="mcBaunellimg"  value=""><!-- 存放单张图片 -->
                    	</div>
                    </div>
                </div>

<script>
    //初始化富文本编程器
    layui.use(['layedit', "upload", "form"], function () {
        var layedit = layui.layedit;
        var $ = layui.$;
        var upload = layui.upload;
        uploadMcBaunell(false);
        
        //多图上传
        function uploadMcBaunell(that){
        	//获取需要渲染的节点DOM对象
	       var imgDiv=null;
	       if(that!=false){
	    	   imgDiv=that;
	       }else{
	    	   var mcBaunell =document.querySelectorAll('.mcBaunell');
	    	   imgDiv=mcBaunell[mcBaunell.length - 1];
	       }
	       upload.render({
	            elem: imgDiv,
	            url: '/wxetx/mechanism/upload',
	            data:{type:'thumb'},//缩略图
	            size: 1024,
	            accept:"images",
	            exts: 'jpg|png|gif|bmp|jpeg',
	            before: function(){
	                showLoading();
	            },
	            done: function (result) {
	            	var item = this.item;
	                layer.closeAll('loading');
	                if (result.success) {
	                	item.html("<img src='" + result.data.url + "' style='width: 130px;height: 130px;'/><p>点击重新上传，或将文件拖拽到此处</p>");
	                    $(".wxmp-doclist .main img").attr("src",result.data.url);
	                    $(item).next().next().next().val(result.data.url); //存放图片
	                    getmcBaunell();
	                } else {
	                    layer.msg("上传接口异常");
	                }
	            },
	            error: function(){
	                layer.closeAll('loading');
	                layer.msg(result.msg || "上传接口异常");
	            }
	        });
        }
         //新增上传图片
         window.addDiv=function(e){
    		var k=$("#mcBaunellDiv").find('div.mcBaunells').length;
    		if(k>=5){
    			alert("最多只能添加5张图片");
    			return;
    		}
    		var html='<div class="mcBaunells" style="width: 200px;text-align: -webkit-center;float: left;margin:0px 5px 5px 0px;">';
			html+='<div class="layui-upload-drag mcBaunell" style="margin-bottom: 10px;">';
			html+='<i class="layui-icon"></i>';
			html+='<p>点击上传，或将文件拖拽到此处</p>';
			html+='</div>';
			html+=' <div>';
			html+='<a type="button" οnclick="moveLeft(this);" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe603;</i></a>';
			html+='<a type="button" οnclick="addDiv(this);"  class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe624;</i></a>';
	    	html+='<a type="button" οnclick="deleteDiv(this);" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe640;</i></a>';
	    	html+='<a type="button" οnclick="moveRight(this);" class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon">&#xe602;</i></a>';
	    	html+='</div>';
	    	html+='<input type="hidden" class="mcBaunellimg"  value="">';
	    	html+='</div>';
 			$(e).parent().parent().after(html);
 			//获取当前上传组件节点的下一个组件节点 ，对该新增的节点再次渲染
 			var that=$(e).parent().parent().next().find('div.mcBaunell');
 			//图片上传组件函数
 			uploadMcBaunell(that);
         }
    });
    //向左移动
    function moveLeft(e){
    	var me = $(e).parent().parent();
		var htmldiv = null;
		var i=$(e).parent().parent().prev().length;
		if(i>0){
			htmldiv = me.prev();
			htmldiv.before(me);
			getmcBaunell();
		}else{
			alert("已经是最左边了");
		}
    }
    //向右移动
	function moveRight(e){
		var me = $(e).parent().parent();
		var htmldiv = null;
		var i=$(e).parent().parent().next().length;
		if(i>0){
			htmldiv = me.next();
			htmldiv.after(me);
			getmcBaunell();
		}else{
			alert("已经是最右边了");
		}
    }
    
	 //整理图片地址
	function getmcBaunell(){
		var num=$("#mcBaunellDiv").find('input.mcBaunellimg').length;
		var img=$("#mcBaunellDiv").find('input.mcBaunellimg');
		var url;
		for(var i=0;i<num;i++)
		{	 
			 if(i==0){
				 url=$(img).eq(i).val();
			 }else{
				 url=url+","+$(img).eq(i).val();
			 }
		}
	    $("#mc_baunell").val(url); 
    }
	//删除当前选中上传图片组件
 	function deleteDiv(e){
 		$(e).parent().parent().remove();
 		getmcBaunell();
 	}
</script>

代码看完了：请看分析
首先创建一个函数function uploadMcBaunell(that)存放upload.render({});组件；
再把函数在页面加载完后渲染一次

官网文档：
elem ：指向容器选择器，如：elem: ‘#id’。也可以是DOM对象

因此 elem 存放参数为上传组件的dom对象
因为是多图上传，用id不太方便，所以用class 进行定位".mcBaunell"

<div class="layui-upload-drag mcBaunell" style="margin-bottom: 10px;">

js动态生成html

当新增一个组件添加后，再次获取该新增组件的Dom对象，调用函数

uploadMcBaunell(that);

对新增节点进行渲染。

至此完成多图上传js动态添加html后， upload.render({ });
不能上传图片的问题：
总结就是：创建一个函数具体实现为upload.render， 用来给其他方法调用，页面加载完先渲染一次，新增html后再次调用渲染一次。

如有不对，请各位大神多指正，赐教！谢谢！