从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。试着评论最后一行

编辑：图像仍然绑定到 is 索引。所以我只是重写了代码：

<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

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

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

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

Note that v-for refs do not guarantee the same order as your source Array.

In the next release you can determine how to register refs yourself by passing a function to :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>

从vuejs中的预览中删除图像

Delete image from preview in vuejs

html

javascript

vue.js

vuejs2