国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

masyarakat

Belajar

Perpustakaan Alatan

Alat AI

Masa lapang

Melayu

Bagaimana untuk menggunakan 'this.$refs' dalam api komposisi Vue 3?

P粉420958692 2023-12-26 16:42:38

598

Saya cuba memuat naik menggunakan api gubahan vue. Walaupun muat naik berfungsi dengan baik, saya ingin menetapkan semula apabila butang tetapan semula diklik, tetapi ia tidak boleh diakses dalam api gubahan $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>

P粉420958692

membalas semua(1)

P粉7624473632023-12-27 14:27:58 Tingkat 1

Apa yang perlu anda lakukan, pada mulanya anda perlu memasukkan komponen getCurrentInstance, const instance = getCurrentInstance();然后您需要執(zhí)行 instance.refs.file.value = null Secara ringkasnya, komponen anda sepatutnya kelihatan seperti ini.

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