如何触发已隐藏的v-file-input组件打开文件选择窗口？

这个问题我之前也碰到过，其实核心就是通过ref拿到v-file-input内部的原生文件输入框，然后手动触发它的点击事件就行，具体步骤和代码示例如下：

步骤说明 #

• 给隐藏的v-file-input添加ref属性，方便后续获取组件实例
• 在自定义按钮的点击方法中，通过ref定位到原生的input[type="file"]元素
• 调用该元素的click()方法，就能触发文件选择窗口打开
• 记得绑定v-file-input的@change事件，用来处理选中的文件

完整代码示例 #

模板部分 #

<template>
  <div class="file-upload-container">
    <!-- 隐藏的v-file-input组件 -->
    <v-file-input
      ref="hiddenFileInput"
      hide-input
      prepend-icon=""
      @change="handleFileSelected"
    ></v-file-input>

    <!-- 自定义的上传按钮 -->
    <v-btn
      color="primary"
      @click="openFileSelector"
    >
      选择要上传的文件
    </v-btn>
  </div>
</template>

脚本部分 #

<script>
export default {
  methods: {
    openFileSelector() {
      // 通过ref获取到v-file-input组件，再找到内部的原生文件输入框
      const nativeInput = this.$refs.hiddenFileInput.$el.querySelector('input[type="file"]');
      
      // 确保找到元素后再触发点击
      if (nativeInput) {
        nativeInput.click();
      }
    },
    handleFileSelected(selectedFile) {
      // 这里处理选中的文件，比如上传逻辑
      if (selectedFile) {
        console.log("选中的文件：", selectedFile);
        // 调用你的上传接口或者其他处理逻辑
      }
    }
  }
}
</script>

针对Vuetify 3的小提示 #

如果是使用Vuetify 3，获取原生输入框的方式基本一致，只是部分组件的DOM结构可能略有不同，你可以调整一下选择器：

// Vuetify 3中可以这样获取
const nativeInput = this.$refs.hiddenFileInput.querySelector('input[type="file"]');

原理其实很简单：原生的input[type="file"]元素本身就支持通过click()方法触发文件选择窗口，我们只是通过自定义按钮间接调用了这个原生行为，完美适配你隐藏v-file-input的需求。

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