layui的upload动态数据事件绑定

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

第一种、通过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();
}

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值