Vue.js中通过按钮触发隐藏file输入框 解决this.$refs.image.click报错

核心报错原因 #

调用this.$refs.image.click报错，本质是this.$refs.image没有拿到预期的DOM元素，导致调用click方法时触发undefined相关报错。

分场景修复方案 #

场景1：基于Vue2开发 #

先确认2个前置条件：

• 页面内不存在多个ref="image"的元素，重复声明ref会导致this.$refs.image返回DOM数组而非单个元素，直接调用click方法会报错
• 隐藏的file input没有被v-if控制渲染，若使用了v-if请替换为v-show，确保组件初始化后该DOM已被渲染到页面中

修改selectFile方法，增加容错判断即可：

methods: {
  selectFile() {
    const inputDom = this.$refs.image
    // 先确认拿到DOM元素再执行点击
    inputDom && inputDom.click && inputDom.click()
  },
  // 其余方法保持不变
}

如果你的file input是放在v-for循环内的，ref默认返回DOM数组，需要取对应索引的元素再调用click：

this.$refs.image[0].click()

场景2：基于Vue3开发 #

如果使用组合式API+<script setup>语法，$refs的用法和Vue2有差异，需要先声明和ref属性同名的响应式变量才能绑定DOM：

<template>
  <!-- 原有模板代码保持不变 -->
  <v-btn
    height="50"
    width="180"
    color="#6C63FF"
    class="mx-8 my-4"
    @click="selectFile"
  >
    <v-icon color="white"> mdi-image-plus </v-icon>
  </v-btn>
  <input
    ref="image"
    type="file"
    accept="image/*"
    style="display: none"
    @change="getFileImage"
    multiple
  />
</template>

<script setup>
import { ref } from 'vue'
// 声明和ref属性同名的响应式变量，用于绑定DOM
const image = ref(null)

const selectFile = () => {
  // 取值需要用.value
  image.value?.click()
}

const getFileImage = (e) => {
  // 原有获取文件的逻辑保持不变
}
</script>

如果使用Vue3的选项式API写法，参考Vue2的修复方案即可。

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