亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Bagaimana untuk menggunakan 'this.$refs' dalam api komposisi Vue 3?
P粉420958692
P粉420958692 2023-12-26 16:42:38
0
1
611

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.filethis.$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
P粉420958692

membalas semua(1)
P粉762447363

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan