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

最新推荐文章于 2024-05-14 17:06:03 发布

moTzxx

最新推荐文章于 2024-05-14 17:06:03 发布

阅读量311

点赞数

分类专栏： React 文章标签： layui hook

本文链接：https://blog.csdn.net/u011415782/article/details/110393882

版权

React 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

背景

最近接触到 【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('上传失败,请重新上传');
                    }
                });
            });
        }

【注意】:

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