英文:
How to make clickable images that acts like input file
问题
我有两个输入文件和两个图像，现在我尝试创建一个可点击的图像，它会像输入文件一样操作，并将文件名存储在其中，使用Vue 3，但是当我点击图像时，我一直收到Uncaught TypeError: Cannot read properties of null (reading 'click')错误
以下是我的代码
<template>
<input class="form-control" type="file" @change="handleFileUpload($event, 'image1')" ref="fileInputRefs[0]" style="display: none;">
<img src="front.png" class="images" @click="handleImageClick(0)">
<input class="form-control" type="file" @change="handleFileUpload($event, 'image1')" ref="fileInputRefs[1]" style="display: none;">
<img src="back.png" class="images" @click="handleImageClick(1)">
</template>
<script setup>
const fileInputRefs = [
ref(null),
ref(null)
]
const handleImageClick = (index) => {
fileInputRefs[index].value.click()
}
const handleFileUpload = (event, id) => {
const fileList = event.target.files
const reader = new FileReader()
reader.readAsDataURL(fileList[0])
reader.onload = () => {
if (id === 'image1') {
file1.value = {
file: fileList[0],
dataUrl: reader.result
}
} else if (id === 'image2') {
file2.value = {
file: fileList[0],
dataUrl: reader.result
}
}
}
}
</script>
希望这能帮助你解决问题。
英文:
I have two input files and two images not I am trying to create a clickable image that will act like an input file and store the file name in it using Vue 3 but I keep on getting Uncaught TypeError: Cannot read properties of null (reading 'click') error when I click on the image
Here is my code
<template>
<input class="form-control" type="file" @change="handleFileUpload($event, 'image1')"ref="fileInputRefs[0]" style="display: none;">
<img src="front.png" class="images" @click="handleImageClick(0)">
<input class="form-control" type="file" @change="handleFileUpload($event, 'image1')"ref="fileInputRefs[1]" style="display: none;">
<img src="back.png" class="images" @click="handleImageClick(1)">
<script setup>
const fileInputRefs = [
ref(null),
ref(null)
]
const handleImageClick = (index) => {
fileInputRefs[index].value.click()
}
const handleFileUpload = (event, id) => {
const fileList = event.target.files
const reader = new FileReader()
reader.readAsDataURL(fileList[0])
reader.onload = () => {
if (id === 'image1') {
file1.value = {
file: fileList[0],
dataUrl: reader.result
}
} else if (id === 'image2') {
file2.value = {
file: fileList[0],
dataUrl: reader.result
}
}
}
}
</script>
答案1
得分: 1
试图绑定 ref (:ref)：
const { ref } = Vue
const app = Vue.createApp({
setup() {
const fileInputRefs = ref([])
const handleImageClick = (index) => {
fileInputRefs.value[index].click()
}
const handleFileUpload = (event, id) => {
const fileList = event.target.files
const reader = new FileReader()
reader.readAsDataURL(fileList[0])
reader.onload = () => {
if (id === 'image1') {
fileInputRefs.value = {
file: fileList[0],
dataUrl: reader.result
}
} else if (id === 'image2') {
fileInputRefs.value[1] = {
file: fileList[0],
dataUrl: reader.result
}
}
}
}
return {
handleImageClick, handleFileUpload, fileInputRefs
};
},
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<input class="form-control" type="file" @change="handleFileUpload($event, 'image1')"
:ref="el => { fileInputRefs[0] = el }" style="display: none;">
<img src="front.png" class="images" @click="handleImageClick(0)">
<input class="form-control" type="file" @change="handleFileUpload($event, 'image2')"
:ref="el => { fileInputRefs[1] = el }" style="display: none;">
<img src="back.png" class="images" @click="handleImageClick(1)">
</div>
英文:
Try to bind ref (:ref):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const { ref } = Vue
const app = Vue.createApp({
setup() {
const fileInputRefs = ref([])
const handleImageClick = (index) => {
fileInputRefs.value[index].click()
}
const handleFileUpload = (event, id) => {
const fileList = event.target.files
const reader = new FileReader()
reader.readAsDataURL(fileList[0])
reader.onload = () => {
if (id === 'image1') {
fileInputRefs.value = {
file: fileList[0],
dataUrl: reader.result
}
} else if (id === 'image2') {
fileInputRefs.value[1] = {
file: fileList[0],
dataUrl: reader.result
}
}
}
}
return {
handleImageClick, handleFileUpload, fileInputRefs
};
},
})
app.mount('#demo')
<!-- language: lang-html -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<input class="form-control" type="file" @change="handleFileUpload($event, 'image1')"
:ref="el => { fileInputRefs[0] = el }" style="display: none;">
<img src="front.png" class="images" @click="handleImageClick(0)">
<input class="form-control" type="file" @change="handleFileUpload($event, 'image2')"
:ref="el => { fileInputRefs[1] = el }" style="display: none;">
<img src="back.png" class="images" @click="handleImageClick(1)">
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论