Vue

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

2018-5-4 815字 9,479

vue-input-file-error

最近用 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);
版权声明:Shire 发表于 2018-5-4
转载请注明: VUE项目中无法触发隐藏input[type=file]的事件 | Shire

评论

该文章已经关闭评论