问题背景:有一个列表中需要对已有视频进行更换封面图,视频列表加载之后在每一个视频上加了一个上传文件的按钮,但是按钮怎么都渲染不上事件,试了几种办法
第一种、通过class类来给元素批量渲染,对于加载出来的元素无效
第二种、在接口返回中针对每一个id分别渲染,第一次加载出来的数据可以正常上传,但是列表刷新后,就不行了
后来在网上找了好多,有一个老哥给了我思路,就是定义一个隐藏的上传按钮,然后通过对upload的重载进行参数控制。
<input id="videoCoverUrl" type="input" class="layui-hide">
//上传视频封面
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();
}