Así que estoy cargando, previsualizando y eliminando múltiples imágenes en vue js. Aquí está lo que tengo:
<input id="file-upload" type="file" multiple @change="uploadImage" /> <div v-for="(image, key) in productImages" :key="key"> <div class="image-holder"> <img v-bind:ref="'image'" alt="" src="" /> <button type="button" @click="removeImage(image, key)"></button> </div> </div uploadImage(e) { let selectedFiles = e.target.files; for (let i = 0; i < selectedFiles.length; i++) { this.productImages.push(selectedFiles[i]); } for (let i = 0; i < this.productImages.length; i++) { let reader = new FileReader(); reader.onload = (e) => { this.$refs.image[i].src = reader.result; }; reader.readAsDataURL(this.productImages[i]); } }, removeImage(image, index) { this.productImages.splice(this.productImages.indexOf(image),1); this.$refs.image[index].src = "" }Pero aquí está el problema con esto: por ejemplo, subo tres imágenes y hago clic para eliminar la segunda imagen (en el medio), pero elimina la imagen del medio (en la que hice clic) y la última imagen (en la que no hice clic) para eliminar). Entonces, básicamente, con un clic elimina dos imágenes.
¿Alguna sugerencia de cómo solucionar esto?
En realidad, usar v-for con ref tiene muchos problemas en vue 2. Siga este problema:
v-for, refs y acceso a refs. por índice de matriz después de Array.unshift
Como dijo Evan You, este problema se resolvió en vue 3:
Tenga en cuenta que v-for refs no garantiza el mismo orden que su matriz de origen.
En la próxima versión, puede determinar cómo registrar referencias usted mismo pasando una función a :ref.
Intento arreglar tu código pero no puedo encontrar la manera. Tal vez tengas que trabajar con DOM directamente.
Si encuentro una respuesta, actualizaré mi respuesta pronto.
Está ocultando el tercero después de cortar la matriz.
índice antes del segmento 0 1 2
índice después del segmento 0 1
El 2 se convierte en 1 en la matriz. Intenta comentar la última línea.
editar: Y la imagen todavía está vinculada a su índice. Así que simplemente reescribo el código:
<template> <div id="app"> <input id="file-upload" type="file" multiple @change="uploadImage" /> <div v-for="(image, key) in productImages" :key="key"> <div class="image-holder"> <img v-bind:ref="'image'" alt="" src="" /> <button type="button" @click="removeImage(image, key)">x</button> </div> </div> </div> </template> <script> export default { name: "App", components: {}, data() { return { productImages: [], }; }, methods: { uploadImage(e) { let selectedFiles = e.target.files; for (let i = 0; i < selectedFiles.length; i++) { this.productImages.push(selectedFiles[i]); } this.applyImage(); }, removeImage(image, index) { console.log(this.productImages); this.productImages.splice(index, 1); this.applyImage(); //this.$refs.image[index].src = "" // You are hidding the 3rd one that is now in index 1. }, applyImage() { for (let i = 0; i < this.productImages.length; i++) { let reader = new FileReader(); reader.onload = (e) => { this.$refs.image[i].src = reader.result; }; reader.readAsDataURL(this.productImages[i]); } }, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .image-holder { float: left; } </style>Intenta llamar al método para renderizar imágenes:
new Vue({ el: '#demo', data() { return { productImages: [] } }, methods: { uploadImage(e) { let selectedFiles = e.target.files; for (let i = 0; i < selectedFiles.length; i++) { this.productImages.push(selectedFiles[i]); } this.refreshImg() }, refreshImg() { for (let i = 0; i < this.productImages.length; i++) { let reader = new FileReader(); reader.onload = (e) => { this.$refs.image[i].src = reader.result; }; reader.readAsDataURL(this.productImages[i]); } }, removeImage(image, index) { this.productImages.splice(index, 1); this.refreshImg() }, } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <template> <input id="file-upload" type="file" multiple @change="uploadImage" /> <div v-for="(image, key) in productImages" :key="key"> <div class="image-holder"> <img v-bind:ref="'image'" alt="" src="" style="width: 50px;" /> <button type="button" @click="removeImage(image, key)"></button> </div> </div> </template> </div>