从 vuejs 中的预览中删除图像

Question

所以我在 vue js 中进行多张图片的上传、预览和删除。这是我所拥有的：

<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 = ""
}

但问题在于：例如，我上传了三张图片，然后单击以删除第二张图片（在中间），但它删除了中间的图片（我点击了）和最后一张图片（我没有'不要点击删除）。因此，基本上只需单击一下即可删除两个图像。

有什么建议可以解决这个问题吗？

Answer 1

切片数组后隐藏第三个。

切片前的索引 0 1 2

切片后的索引 0 1

数组中的 2 变为 1。试着评论最后一行

edit：并且图像仍然绑定到索引。所以我只是重写了代码：

<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>

Answer 2

实际使用v-for和ref在vue 2中有很多问题，请关注这个问题：

v-for, refs and access to refs. by array index after Array.unshift

正如 Evan You 所说，这个问题在 vue 3 中解决了：

请注意，v-for refs 不保证与源数组的顺序相同。

在下一个版本中，您可以通过以下方式自行决定如何注册 refs 将函数传递给 :ref.

我尝试修复您的代码，但找不到方法。也许您必须直接使用 DOM。

如果我找到答案，我会尽快更新我的答案。

Answer 3

尝试调用方法渲染图片：

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>