Vue3组合式API中如何使用$refs？文件上传重置功能遇阻

开发者阿泽

2026-8-11

Vue组合式API文件上传重置问题解决

你在<script setup>中无法使用this.$refs或直接访问$refs.file的核心原因是：组合式API的<script setup>不存在this上下文，必须通过ref()函数显式声明对应DOM元素的引用变量。

修改方案及完整代码

<template>
  <input type="file" class="absolute w-0 h-0 invisible opacity-0" @change="handleImageSelected" ref="fileInput" accept="image/*">
  <button @click="fileInput?.click()">Upload</button>
  <button @click="resetUploadFile">Reset</button>
</template>

<script setup>
import {ref} from 'vue'

const imageFile = ref()
const imageUrl = ref()
// 声明对应文件输入框的DOM引用变量
const fileInput = ref(null)

function handleImageSelected(e) {
  if (!e.target.files.length) return;
  imageFile.value = e.target.files[0];
  console.log(e.target.files[0])
  let reader = new FileReader();
  reader.readAsDataURL(imageFile.value);
  reader.onload = e => {
    imageUrl.value = e.target.result;
  };
}

function resetUploadFile() {
  // 清空文件输入框的选中值
  if (fileInput.value) {
    fileInput.value.value = ''
  }
  // 重置本地状态变量
  imageFile.value = null
  imageUrl.value = null
}
</script>

关键改动说明

声明DOM引用：用const fileInput = ref(null)创建对应文件输入框的引用变量，模板中通过ref="fileInput"绑定到DOM元素，这样就能在组合式API中直接访问该元素。
修正上传按钮逻辑：用fileInput?.click()替代$refs.file.click()，可选链操作符?.可以避免DOM未挂载时触发报错。
重置文件输入框：通过fileInput.value.value = ''直接清空文件输入框的选中值，同时重置你的本地状态变量imageFile和imageUrl。