github VUE项目中无法触发隐藏input[type=file]的事件

分类:WEB前端 浏览:392次
VUE项目中无法触发隐藏input[type=file]的事件

最近用 Vue 做了个项目,其中涉及到头像上传的功能,在 Web 端典型的做法是把文件控件隐藏,然后点击上传按钮时候模拟点击文件控件:

<input type="file" name="avatar" id="file-picker" style="display:none;">
<button onclick="onclick">上传头像</button>

<script>
  function onclick() {
    document.querySelector('#file-picker').click();
  }
</script>

Vue 中我也如法炮制了一版,在浏览器、Android 下测试都 OK 的,但在 iOS 下click()却无法触发。查了下似乎是 iOS 上 Safari 的限制,display:none的元素无法被click()触发。

调试许久后发现通过dispathEvent()直接派发事件不受影响,因此可以用下面的代码来实现触发:

const event = new MouseEvent('click');
document.querySelector('#file-picker').dispatchEvent(event);

当然,在 Vue 中使用id或许并不是最合适的方案,我们也可以通过ref来实现:

this.$refs.filePicker.dispatchEvent(event);
作者: JaneCC最后编辑于:2018-05-04 13:22
坚持把简单的事情做好就是不简单,坚持把平凡的事情做好就是不平凡。所谓成功,就是在平凡中做出不平凡的坚持。

--JaneCC

暂时木有评论啊,等您坐沙发呢!

发表感言