layui upload.render 问题 有偿

Question

如图 4个上传图片的

<div class="drop">
    <div id="drop_area"></div>
    
    <div id="drop_area2"></div>
    <div id="drop_area3"></div>
    <div id="drop_area4"></div>
</div>
 <script  >
 

      
  
    
    
  
  
var dragImgUpload = new DragImgUpload("#drop_area",true,{
    callback:function (files) {  //tup.php?imgpath=zhutu
    
  
        //回调函数，可以传递给后台等等
        
         //多图片上传  tup.php?imgpath=zhutu
          return layer.msg('开始上传' );
          
         
           upload.render({
               elem: '#preview',
               url: 'tup.php?imgpath=zhutu' //上传接口
                ,accept: 'images'
                  ,method: 'post' 
                ,data: { Parm1: "hello", Parm2: "world" }  
             
                 
                
                ,done: function(res){
                    //上传完毕回调
                    alert("上传成功！");
                }
                ,error: function(){
                    //请求异常回调
                    alert("上传失败！");
                }
            });
 
 
    

    }
    
})

var dragImgUpload2 = new DragImgUpload("#drop_area2",false,{
    callback:function (files) {
        //回调函数，可以传递给后台等等
        var file = files[0];
        console.log(file.name);
    }
})

var dragImgUpload3 = new DragImgUpload("#drop_area3",false,{
    callback:function (files) {
        //回调函数，可以传递给后台等等
        var file = files[0];
        console.log(file.name);
    }
})

var dragImgUpload4 = new DragImgUpload("#drop_area4",false,{
    callback:function (files) {
        //回调函数，可以传递给后台等等
        var file = files[0];
        console.log(file.name);
    }
})



</script>

Answer 1

你这个赋值方式是又问题的
首先主图点击上传多图时

,done: function(res){
                    //上传完毕回调
                    alert("上传成功！");
                }

时候就动态赋值给其他选项，而不是下面又写new DRagImgUpload方法；你这样写是获取不到返回的数组值得；
其次，不建议你这样写；建议这样写，参考网址https://blog.csdn.net/hzhairuntao/article/details/116296092
动态写比较好，假如已经有其他动态框，重新名称一样覆盖前面的值就行