How to show its preview when uploading a file, using vue.js as an example?

Question

Vue.js

In data - I have downloadable files from <input type="file">.

new Vue({
    el: '#app',
    data: function (){
                  return {
                    files: []
                  }
},
....................

Then I display the names of the files in a loop

<ul>
        <li v-for="file in files">
                <p>{{file.name}}</p>
        </li>
</ul>`

Question - how to display its preview next to the file name? Interested in vue.js way. I would be grateful for a hint.

Answer 1

Your input should have an @change function, for example, which you write to an array through e.target.files, new fileReader and readAsDataURL(), and in the loop already output img with src="data"