Web Uploader多实例上传的解决方案

做项目的时候遇到一个webuploader的小坑，就是在一个页面上需要上传种类型图片的时候，不可能每个类型都去写一个实例吧～。

前端页面

在这里有独单上传的缩略图，也有根据房间类型上传的效果图，一共七个上传图片的按钮。网上找了一大堆，好多都是说用each循环来写的,试了都没什么用。后来自己琢磨了半天相出了一个解决办法：
大致思路是这样的，这些上传图片的按钮做一个点击事件来触发图片上传。通过参数区分图片上传后显示的位置。
html部分

  设计图效果：
  

  
    

      卧室
      客厅
      餐厅
      玄关
      书房
      儿童房
      衣帽间
      阳台
      走廊
      其他
    
    


  
   

    

      

        

          
        
×
       
       
        

          
         
        
        

          

             

               
                 
×
           
          
           

            
           
         
         

           

          
          

            
           
          
          

           

          
           

            
           
        

js代码

//上传设计图片
    $('.addphoto').on('click', function () {
        type=1;
        $('#filePicker_1 div input').click();
    });


    //设计图片删除
    $('.photos').on('click', '.photo .del', function () {
        $(this).parent().remove();
    });

    //上传封面图
    $('.cover .formControls').on('click', '.coverimg', function () {
        type=2;
        $('#filePicker_1 div input').click();
    });
    //重新上传封面图
    $('.coverimg1').on('click', function () {
        type=2;
        $('#filePicker_1 div input').click();
    })

    //图片上传逻辑
    var type = 1; //1封面图片2设计图片
    var uploader = WebUploader.create({
        duplicate: true,//是否可重复选择同一文
        swf: 'lib/webuploader/0.1.5/Uploader.swf',
        server: '{{url("/banner/upload")}}',
        auto: true,
        chunked: true,
        pick: {
            id: '#filePicker_1',
            // id: '#filePicker_0',
            multiple: false   //禁止多选。
        },
        formData: {
            _token:'{{ csrf_token() }}'
        },
        fileVal: "file",
        compress: {
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 90,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: false,
            // 是否允许裁剪。
            crop: false,
            // 是否保留头部meta信息。
            preserveHeaders: true,
            // 如果发现压缩后文件大小比原来还大，则使用原来图片
            noCompressIfLarger: false,  // 此属性可能会影响图片自动纠正功能
            // 单位字节，如果图片大小小于此值，不会采用压缩。
            compressSize: 900 * 1024
        }
    });

    //图片上传成功回调
    uploader.on('uploadSuccess', function (file, response) {
        if (response.code == 1) {
            if  (type == 1){
                var nowtab = $('span.current').attr('data-id');
                var nowblock = $('.tabCon').eq(nowtab-1);
                nowblock.children('.photos').append('' +
                    '
' +
                    '' +
                    '
×
' +
                    '
' +
                    '')
            }
            if  (type == 2){
                $('.cover .formControls .coverimg').remove();
                $('.cover .formControls .coverimg1').remove();
                $('.cover .formControls').append('' +
                    '' +
                    '');
            }
        } else {
            layer.msg(response.message);
        }
    });

    //上传失败回调
    uploader.on('uploadError', function (file, response) {
        layer.msg('上传失败');
    });

因为两种图片显示图片的html上下结构不一样所以只能在成功回掉的时候区分。
写完之后找了一下相关的资料，发现有一种很棒的方法来解决https://www.708034.cn/index/show/id/110.html