layui的upload动态数据事件绑定

最新推荐文章于 2024-08-28 22:10:41 发布

茶饭

最新推荐文章于 2024-08-28 22:10:41 发布

阅读量1.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： LayUI 文章标签：前端服务器 layui

本文链接：https://blog.youkuaiyun.com/asp_lilu/article/details/136745372

LayUI 专栏收录该内容

3 篇文章

订阅专栏

文章讲述了在列表中替换视频封面时，遇到上传按钮渲染问题的解决方案，包括尝试过通过class批量渲染、针对每个ID单独渲染，最终采用隐藏上传按钮并重载参数的方式，解决了layuiupload.js中的用户激活错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景：有一个列表中需要对已有视频进行更换封面图，视频列表加载之后在每一个视频上加了一个上传文件的按钮，但是按钮怎么都渲染不上事件，试了几种办法

第一种、通过class类来给元素批量渲染，对于加载出来的元素无效

第二种、在接口返回中针对每一个id分别渲染，第一次加载出来的数据可以正常上传，但是列表刷新后，就不行了

后来在网上找了好多，有一个老哥给了我思路，就是定义一个隐藏的上传按钮，然后通过对upload的重载进行参数控制。

//上传视频封面
var coverupload = upload.render({
elem: '#videoCoverUrl' //绑定元素
, multiple: false
, auto: false
, headers: os.getToken()
, size: 3072
, number: 5
, progress: function (value) {//上传进度回调 value进度值
element.progress('uppro', value + '%');
if (value === 100) {
vm.upStatus = 'layui-hide';
}
}
, exts: 'jpg|png|gif|bmp|jpeg'
, url: '/api/localfiles/upload' //上传接口
, data: {
//path: function () { return $('#localpath').val() }

}, choose: function (obj) {
//预读本地文件
obj.preview(function (index, file, result) {
//let data = '@Model.SavePath';
//if (data != null && data != undefined && data != '') {
// parent.vm.$imgData = data
//}
parent.vm.$imgData = [result, file.name];
parent.vm.$layuploadobj = obj;
os.OpenCropper(750, 450);
})
}
, before: function () {
vm.upStatus = 'layui-show';
}
, done: function (res) {
if (res.statusCode === 200) {
os.success('上传成功~');
vm.list = [];
oc.initLocal();
} else {
vm.upStatus = 'layui-hide';
os.error(res.message);
}

}
, error: function () {
vm.upStatus = 'layui-hide';
os.error('上传失败');
}
});

在那个老哥的方法中使用了
$("#uploadMeetBtn").click();

来触发点击事件，但是现在使用这种方式触发点击事件会在layui的upload中报错：

upload.js:2 File chooser dialog can only be shown with a user activation.

后面又试了好多方式，网上有说需要给点击事件增加延迟，延迟500-1500毫秒，都不好使，最后试着重新获取元素，然后对元素直接点击反而又行了，就很莫名其妙。一下是重载方法的实现，再此记录

coverupload: function (m) {
form.render();
coverupload.reload({
data:{
id: m.guid,
type:2
}
});
var input = document.getElementById('videoCoverUrl');
input.click();
}