How to display the image icon instead of image name-CodePudding

Below I have written a code for multiuploading images using vue. So I am able to upload the images fine. But i want to enhance this and the images which is uploaded by the user that has to display instead of image name. So here while we upload a image then instead of image name i want to display image icon. So how to display the image icon please let me know.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="asad">
<template >
    <div class="container">
        <div>
            <h2>Multiple Files</h2>
            <hr/>
            <label>Files
                <input type="file" multiple @change="handleFileUploads( $event )"/>
                <ul v-if="files.length">
                <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
                <li>{{ files }}</li>
                </ul>
            </label>
            
            <div>
                <img v-for="image in images" :src="image" />
              </div>
            
            <br>
            <button v-on:click="submitFiles()">Submit</button>
        </div>
    </div>
</template>
</div>
</body>

<script>
var app = new Vue({
  el: '#asad',
  data(){
    return {
      files: [],
      images: [],
    }
  },
  computed: {
    filesNames() {
      const fn = []
      for (let i = 0; i < this.files.length;   i) {
        fn.push(this.files.item(i).name)
      }
      return fn
    }
  }, 
  methods: {
    handleFileUploads( event ){
      this.files = event.target.files;
    },

    submitFile(){
      let formData = new FormData();
      for( var i = 0; i < this.files.length; i   ){
        let file = this.files[i];
        formData.append('files['   i   ']', file);
        this.images.push(URL.createObjectURL(file));
      }

      axios.post( '/multiple-files', formData, 
        {headers: {'Content-Type': 'multipart/form-data'}}
      ).then(function(){
        console.log('SUCCESS!!');
      })
      .catch(function(){
        console.log('FAILURE!!');
      });
    }
  }
})
  
</script>
</html>

CodePudding user response：

Generate blobs on upload to display the uploaded files

handleFileUploads (event) {
  this.images = [...event.target.files].map(URL.createObjectURL);
}

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      files: [],
      images: [],
    }
  },
  computed: {
    filesNames() {
      const fn = []
      for (let i = 0; i < this.files.length;   i) {
        fn.push(this.files.item(i).name)
      }
      return fn
    }
  },
  methods: {
    handleFileUploads(event) {
      this.files = event.target.files;
      this.images = [...this.files].map(URL.createObjectURL);
    },

    submitFile() {
      let formData = new FormData();
      for (var i = 0; i < this.files.length; i  ) {
        let file = this.files[i];
        formData.append('files['   i   ']', file);
      }

      axios.post('/multiple-files', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(function() {
          console.log('SUCCESS!!');
        })
        .catch(function() {
          console.log('FAILURE!!');
        });
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <h2>Multiple Files</h2>
  <hr/>
  <label>
    <span>Files</span>
    <input type="file" multiple @change="handleFileUploads($event)" />
    <ul v-if="files.length">
      <li v-for="(name, i) in filesNames" :key="i">{{ name }}</li>
    </ul>
  </label>
  <div>
    <img v-for="image in images" :src="image" />
  </div>
  <br />
  <button @click="submitFiles()">Submit</button>
</div>