Wie verwende ich „this.$refs“ in der Vue 3-Kompositions-API?

Question

Ich versuche, mit der Vue-Kompositions-API hochzuladen. Während der Upload einwandfrei funktioniert, möchte ich ihn zurücksetzen, wenn auf die Schaltfläche „Zurücksetzen“ geklickt wird, aber er ist in der Kompositions-API nicht zugänglich $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>

Answer 1

你必须做什么，最初你需要包含 getCurrentInstance 组件， const instance = getCurrentInstance();然后您需要执行 instance.refs.file.value = null 总之，您的组件应如下所示。

<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>