Question

我正在创建一个功能，用户可以在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 = ""
    }
}

如何在使用vuejs上传之前预览多个附件图像

1 个答案: