Vue3中如何让HTMLElement.click()在Chrome文件输入框生效？

你的问题源于Chrome对非用户直接交互触发的文件选择框点击有严格安全限制：display: none的元素会被Chrome判定为不在交互流中，通过JS触发其click()会被拦截，而Firefox和Safari的策略相对宽松。下面是几个可行的解决办法：

办法1：替换display: none的隐藏方式 #

改用视觉隐藏但保留交互能力的样式，让元素仍处于DOM交互树中：

<button @click="pickFile" class="btn btn-primary">
    <i class="fas fa-file-import"></i>
    <span>Importer un fichier</span>
</button>
<input
    type="file"
    style="position: absolute; opacity: 0; z-index: -1; width: 0; height: 0;"
    ref="fileInput"
    @change="onFilePicked" 
/>

办法2：用<label>标签替代JS触发（推荐） #

直接利用label的原生特性，点击label会自动触发内部的file input，完全不需要JS，所有浏览器都兼容：

<label class="btn btn-primary">
    <i class="fas fa-file-import"></i>
    <span>Importer un fichier</span>
    <input
        type="file"
        style="display: none;"
        @change="onFilePicked" 
    />
</label>

同时可以删掉pickFile方法，代码更简洁，还能彻底避开浏览器的安全限制。

办法3：Vue 3组合式API下的正确引用（如果用<script setup>） #

如果你用的是组合式API，确保ref正确获取DOM元素：

<template>
<button @click="pickFile" class="btn btn-primary">
    <i class="fas fa-file-import"></i>
    <span>Importer un fichier</span>
</button>
<input
    type="file"
    ref="fileInput"
    @change="onFilePicked" 
    class="hidden-file"
/>
</template>

<script setup>
import { ref } from 'vue';
const fileInput = ref(null);

const pickFile = () => {
  fileInput.value?.click();
};

const onFilePicked = () => {
  console.log("file picked");
};
</script>

<style scoped>
.hidden-file {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 0;
  height: 0;
}
</style>

核心原理：Chrome的安全策略要求文件选择框的点击必须是用户直接触发的交互动作，display: none的元素会被排除在交互上下文之外，而视觉隐藏的元素或label关联的方式，都能让浏览器识别到操作源于用户的直接点击。

内容的提问来源于stack exchange，提问作者SaladeDeFruits