我正在嘗試使用 vue 組合 api 上傳。雖然上傳工作正常，但我想在單擊重置按鈕時重置，但無法在合成 api 中訪問 $refs.file 或 this.$refs.file 。
<template>
<input type="file" class="absolute w-0 h-0 invisible opacity-0" @change="handleImageSelected" ref="file" accept="image/*">
<button @click="$refs.file.click()">Upload</button>
<button @click="resetUploadFile">Reset</button>
</template>
<script setup>
import {ref} from 'vue'
const imageFile = ref()
const imageUrl = ref()
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() {
this.$refs.file.target.value = null
imageFile.value = null
imageUrl.value = null
}
</script> 
1
0
0
你必須做什么，最初你需要包含 getCurrentInstance 組件，
const instance = getCurrentInstance();然后您需要執(zhí)行 instance.refs.file.value = null 總之，您的組件應(yīng)如下所示。
<template>
<input type="file" class="absolute w-0 h-0 invisible opacity-0" @change="handleImageSelected" ref="file" accept="image/*">
<button @click="$refs.file.click()">Upload</button>
<button @click="resetUploadFile">Reset</button>
</template>
<script setup>
import {ref, getCurrentInstance} from 'vue'
const instance = getCurrentInstance()
const imageFile = ref()
const imageUrl = ref()
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() {
instance.refs.file.value = null
imageFile.value = null
imageUrl.value = null
}
</script>
