Preview multiple images while uploading with V-for in Vue JS

Question

Preview multiple images while uploading with V-for in Vue JS

Having trouble displaying images in a loop using :ref

I've implemented FileReader() to read the field.

Vue Component

<div v-for="(image, index) in imgFile" :key="index">
<img :ref="'image'+parseInt( index )">
{{image.name}}
</div>
<input type="file" class="file-upload-default" @change="onFileChange" multiple>
<span style="cursor:pointer" class="file-upload-browse">
<img src="/addmore.png" height="50" width="50">
</span>

export default{
onFileChange(e){
var selectedFiles = e.target.files;
for (var i=0; i < selectedFiles.length; i++){
  this.imgFile.push(selectedFiles[i]);
}

if (selectedFiles) {
  for (var i=0; i < this.imgFile.length; i++){
    let reader = new FileReader();
    reader.addEventListener('load', function(){          
     this.$ref["image"+parseInt( i )][0].src = reader.result;         
   }.bind(this), false); 
     reader.readAsDataURL(this.imgFile[i]);
   }
     }
   }
 }

My goal is to display the selected images from the event listener.

javascript vue.js

Answer 1

Answer №1

Enhance the structure of your architecture by dividing your logic into two separate components. Here is an example of how you can achieve this:

<template>
  <div class="parent-component">
    <image-component :image="image" v-for="(image, index) in images" :key="index" />
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  data () {
    return {
      images: []
    };
  }
};
</script>

<template>
  <div class="image-component">
    <img ref="imgElement">
    {{ image.name }}
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    image: {
      type: Object,
      required: true
    }
  },
  methods: {
    ...
  },
  mounted () {
    // The loop is not necessary here because each instance of the image-component only contains one <img> element. The looping logic is handled in the parent component.
    console.log(this.$refs.imgElement);
  }
};
</script>

Answer 2

Enhance the structure of your architecture by dividing your logic into two separate components. Here is an example of how you can achieve this:

<template>
  <div class="parent-component">
    <image-component :image="image" v-for="(image, index) in images" :key="index" />
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  data () {
    return {
      images: []
    };
  }
};
</script>

<template>
  <div class="image-component">
    <img ref="imgElement">
    {{ image.name }}
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    image: {
      type: Object,
      required: true
    }
  },
  methods: {
    ...
  },
  mounted () {
    // The loop is not necessary here because each instance of the image-component only contains one <img> element. The looping logic is handled in the parent component.
    console.log(this.$refs.imgElement);
  }
};
</script>

Preview multiple images while uploading with V-for in Vue JS

Answer №1

Similar questions

Is it possible to update labels on an AngularJS slider using a timeout function?

A straightforward redirection in Express involving a static file

This error is thrown when trying to access the property 'message' of an undefined value

Is Material-UI suitable for a large-scale enterprise application?

Discover additional information using just the ID

Unable to find the solution for 'material-ui/Button'

Utilize jQuery's .append() function to dynamically insert content into your webpage

Creating Browser Extensions with Vue.js and Vue CLI

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Retrieve the row id from the table by clicking on a button in a modal box using jQuery

What is the best way to add both the id and the full object to an array list at the

Creating dynamic styles with Material-UI's useStyles

Being required to design a distinct div for every article I am extracting from the API

Include the <component> tag within a Vue.js template

Using Express and Node.js to display a page populated with information

"Discover the step-by-step process of transforming an input field value into a checkbox with

Efficiently Encoding Still Image Data for NextJS

I am uncertain about how to interpret this method signature

What steps can I take to prevent the user from clicking on a different edit button for another row?

Eliminate event listener using unique identifier