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

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

 

前端页面

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

<div class="row c1 clearfix">
  <label class="form-label col-xs-3 col-sm-2">设计图效果：</label>
  <div class="formControls col-xs-9 col-sm-10">
  <input type="text" name="designImg" class="input-text none designImg" autocomplete="off" placeholder="">
    <div class="tabBar clearfix">
      <span data-id="1" class="current">卧室</span>
      <span data-id="2">客厅</span>
      <span data-id="3">餐厅</span>
      <span data-id="4">玄关</span>
      <span data-id="5">书房</span>
      <span data-id="6">儿童房</span>
      <span data-id="7">衣帽间</span>
      <span data-id="8">阳台</span>
      <span data-id="9">走廊</span>
      <span data-id="10">其他</span>
    </div>
    </div>
</div>
<div class="row c1 clearfix">
  <label class="form-label col-xs-3 col-sm-2"></label>
   <div class="formControls col-xs-9 col-sm-10">
    <div class="tabCon" style="display: block;">
      <div class="photos">
        <div class="photo">
          <img data-url="/upload/api/201803/estate15210174177235.jpeg" src="http://ding8.oss-cn-shanghai.aliyuncs.com//upload/api/201803/estate15210174177235.jpeg" alt="" class="radius">
        <div class="del">×</div>
       </div>
       </div>
        <div class="">
          <input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
         </div>
        </div>
        <div class="tabCon" style="display: none;">
          <div class="photos">
             <div class="photo">
               <img data-url="/upload/banner/201803/banner15202403269470.jpeg" src="http://ding8.oss-cn-shanghai.aliyuncs.com//upload/banner/201803/banner15202403269470.jpeg" alt="" class="radius">
                 <div class="del">×</div>
           </div>
          </div>
           <div class="">
            <input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
           </div>
         </div>
         <div class="tabCon" style="display: none;">
           <div class="photos">
          </div>
          <div class="">
            <input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
           </div>
          </div>
          <div class="tabCon" style="display: none;">
           <div class="photos">
          </div>
           <div class="">
            <input class="btn btn-success radius addphoto" type="button" value="添加图片" style="margin-top: 20px;">
           </div>
        </div>
</div>

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('' +
                    '<div class="photo">' +
                    '<img data-url="/'+ response.fileName +'" src="'+ response.ImgPath +'" class="radius">' +
                    '<div class="del">×</div>' +
                    '</div>' +
                    '')
            }
            if  (type == 2){
                $('.cover .formControls .coverimg').remove();
                $('.cover .formControls .coverimg1').remove();
                $('.cover .formControls').append('' +
                    '<img class="radius coverimg" data-url="/'+ response.fileName +'" src="'+ response.ImgPath +'" alt="图片找不到啦">' +
                    '');
            }
        } else {
            layer.msg(response.message);
        }
    });

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

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