扫码关注官方订阅号
我正在尝试使用 vue 组合 api 上传。虽然上传工作正常,但我想在单击重置按钮时重置,但无法在合成 api 中访问 $refs.file 或 this.$refs.file 。
$refs.file
this.$refs.file
Upload Reset
你必须做什么,最初你需要包含 getCurrentInstance 组件, const instance = getCurrentInstance();然后您需要执行 instance.refs.file.value = null 总之,您的组件应如下所示。
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>
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
你必须做什么,最初你需要包含
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>