-
背景
最近接触到
【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
值
【附录】
- 参考文章
【LAYUI UPLOAD 上传无反应】