React-Hoos 下动态加载使用 Layui 上传文件控件 【稀里糊涂小坑不断!】

  • 背景

    最近接触到 【React-Hook】 这一前端框架;
    听周围小伙伴一顿猛夸,
    想到正好可是试试:
    能否优化我的后台 商品 SKU 数据处理操作
    减少繁杂的 DOM 操作(超级费劲

    核心需求便是:
    根据所选则的属性信息,动态出现多个 sku 规格条目
    其中需要图片的上传,截图参考如下


之前单纯使用 LayUI 的代码倒也没啥问题,但是,在 React Hook 中动态添加时,就有多多少少的问题了

▶ 第一个小坑 —— [动态添加的记录中,“<img>“ 标签只会出现第一个]

  • 这种情况是在对比页面元素排版错位是发现的, 简单描述情况就是:

通过 array.map((item,index)=>{}) 动态加载多条 SKU 数据时,只有第一条会正常显示 "<img>" 标签

  • 【方案】

    毕竟咱也不是前端大牛,瞎改了下;
    发现,别把图片标签 <img><button> 标签在同级 div 下,竟然就没事了!
    这是一个奇葩的问题,咱也不懂,咱也不敢乱问啊!

  • 优化后的代码截图如下:

▶ 第二个小坑 —— [上传控件点击无反应或仅第一个正常]

  • 这种情况的出现很复杂、很懵逼的,基本描述为:
  一种情况:	第一个控件可以上传但是只能上传一次,再次点击无效;
  一种情况:	动态遍历生成的上传控件,
  			点击时第一次选择了图片无反应,
  			紧接着触发了第二次选择图片的情况,然后可以上传
  一种情况:	动态生成的上传控件,会不定时前几个能点,但是不触发上传后的回调效果

以我的经验,放在以前,一般是这样处理 —— 【layui upload 上传控件,动态加载后点击失效的处理】

  • 后面通过各种经验搜索测试,发现可以解决的方案如下:

layui.uoload.render() 前就要补充 $(".btn_sku_upload_img").data('haveEvents', false); 等代码

        /**
         * 动态更新渲染 LayUi 的 upload 组件
         * 注意: 是在上传控件加载时就要调用,不然一切白搭!
         */
        function updateSkuUploadTag(){
            layui.use(['upload'], function() {
                let upload = layui.upload;
                $(".btn_sku_upload_img").off('click')
                $(".btn_sku_upload_img").off('change')
                $(".btn_sku_upload_img").data('haveEvents', false);
                
                upload.render({
                    elem: '.btn_sku_upload_img'
                    , type: 'images'
                    , exts: 'jpg|png|gif|jpeg' //设置一些后缀,用于演示前端验证和后端的验证
                    , accept:'images' //上传文件类型
                    , url: image_upload_url //上传图片的 API 路径
                    , before: function (obj) {
                        let sku_index = this.sku_index;
                        obj.preview(function (index, file, result) {
                            $('.sku-img-upload-preview-'+ sku_index).attr('src', result); //图片链接(base64)
                        });
                    }
                    , done: function (res) {
                        //如果上传成功
                        if (res.status == 1) {$('.input-sku-img-'+this.sku_index).val(res.data.url);}
                        dialog.tip(res.message);
                    }
                    , error: function () {
                        //演示失败状态,并实现重传
                        return layer.msg('上传失败,请重新上传');
                    }
                });
            });
        }

【注意】:

  1. 在上传控件加载时就要调用,
    以我的操作为例:使用 useEffectskuInfoArr 数组 变化时,
    就会动态调用这个 updateSkuUploadTag() 方法
  2. 并且,对于上传控件的 lay-data={} 中的 "sku_index"
    不要使用 "23,54" ,"36-22" 这类的设置;
    即代码中我提到的 "{img_index}" 一值,虽然不怎么建议,但有时没有好的方案也可使用数组的 index

【附录】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值