vue.js - 如何删除上传的图片

Question

在这里，我尝试删除上传的图像。就像当用户单击用户上传的任何图像时，如果我们单击十字图标，它必须删除图像。所以下面是我尝试过的代码，我可以删除图像，但是一次删除多个图像我需要只删除选定的图像而不是多个，所以我们该怎么做。所有图像的上角都应该有十字图标。请

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      files: [],
      images: null,
    }
  },
  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);
    },
    
    removeImage: function () {
        this.images = null
      },

    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" />
    <button v-if="images" @click="removeImage()" type="button">×</button>
    
  </div>
  <br />
  <button @click="submitFiles()">Submit</button>
</div>

标签： vue.js