时间戳

首页 > 解决方案 > 如何在使用 vuejs 上传之前预览多个附加图像

vue.js - 如何在使用 vuejs 上传之前预览多个附加图像

问题描述

我正在创建一个功能，用户可以在 Vuejs 中上传多个图像。但在上传这些图片之前，图片应该有预览。此外，还可以在单​​击按钮时删除附加的图像。我在这里的一些帖子中得到了以下代码，但我似乎无法使其工作。非常感谢任何帮助。提前谢谢你。

这是我的代码：

<div class="form-group">
    <label for="image_attach">Attach maximum of 2 images (optional)</label>
      <div v-for="(image, key) in images" :key="key">
           <button class="close" @click.prevent="removeImage(index, $event)">&times;</button>
               <div>
                   <img class="preview" :ref="'image '"/>
                       {{ image.name }}
               </div>
      </div>
      <input type="file" multiple accept="image/*" @change="uploadImage" />
</div>


data () {
   images: [],
},

methods: {
  uploadImage(e) {
      if(this.images.length === 2) {
          alert('You can only upload up to 2 images.')
      } else {
        let vm = this;
        var selectedFiles = e.target.files;

        for (let i = 0; i < selectedFiles.length; i++) {
            console.log(selectedFiles[i])
            this.images.push(selectedFiles[i]);
        }

        for (let i = 0; i < this.images.length; i++) {
            let reader = new FileReader();
            reader.onload = (e) => {
                this.$refs.image[i].src = reader.result;
                console.log(this.$refs.image[i].src);
            };
            reader.readAsDataURL(this.images[i]);
        }
      }
    },
  removeImage(index) {
      this.images.splice(index, 1);
      this.$refs.image[index].name = ""
    }
}

标签： vue.js

解决方案

   <img class="preview" :src="image" :data-id="key"/>
       <i @click="removeImg(key)"></i>

推荐阅读