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);