关于layui upload上传组件上传文件无反应的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于layui upload上传组件上传文件无反应的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近使用layui upload组件时，碰到了上传文件无反应的问题，感到非常困惑。

因为使用layui upload组件不是一次两次了，之前每次都可以，这次使用同样的配方，同样的姿势，为什么就不行了呢？

照例先百度一番，出来的文章都是说第二次上传同样的文件无反应的问题，这个有相应的解决方法。但是我的问题是第一次上传就不行，似乎没有人遇到过这个问题。

苦苦思索一番，依然无果。尝试不断怀疑各种之前已经被验证过的没问题的写法，没有任何效果。就只差怀疑人生了。

虽然搞得我几乎崩溃，但想让我就此放弃，那是不可能的。找出layui upload的源码，通过阅读源码来一步步分析，我的问题是点击按钮可以打开文件选择对话框，选择文件之后就没有任何反应。通过断点调试，发现是change事件没触发，就是这一句

    that.elemFile.on('change', function(){
      $(this).trigger('upload.change');
    });

为什么会不触发呢？这个change事件是绑定在

<input class="layui-upload-file" type="file" accept="" name="file">

这个文件上传组件上面的，其他文章里面提到的二次上传同样的文件无反应也是跟这里有关，因为这个input给value属性赋值为已选择的文件的路径，当第二次上传同样的文件因为路径相同，就不会处理。解决办法就是点击时给这个input的value赋值为空值。但是我这里的value值第一次的时候是空值，所以显然跟这个问题不一样。

不是这个问题那会是什么问题？change事件没绑定成功？什么情况下会导致事件绑定不成功？在源码中发现有这么一行

 // 防止事件重复绑定
    if(options.elem.data('haveEvents')) return;

设置完绑定事件后，

options.elem.data('haveEvents', true);

会给haveEvents赋值，下次就不会再次执行到绑定事件了。

然后我发现在我的代码中初始化的时候因为方法执行回调函数的原因，导致layui.upload.render被执行了两次，结合源代码，我发现我的问题是这样的：

第一次执行layui.upload.render，new了一个upload对象，动态创建<input type="file"/>文件上传组件,事件也是绑定在文件上传组件上面的。

第二次执行layui.upload.render，new了一个新的upload对象，动态创建一个新的<input type="file"/>文件上传组件,但是因为if(options.elem.data('haveEvents')) return;的阻止，事件绑定不上了。

原因找到了，如何解决呢？

其实layui文档里也写了，调用layui.upload.render时，会返回一个实例，我们保存这个实例，下次不要重复去调layui.upload.render就可以了，要调整参数通过实例去调reload方法。文章来源地址https://www.toymoban.com/news/detail-729570.html

到了这里，关于关于layui upload上传组件上传文件无反应的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！