vue.js - 如何在 vue.js 中上传之前预览多个文件

Question

我正在尝试在 vue.js 中上传之前预览选择的多个图像。看起来我做错了什么，但不知道是什么。我会感谢一些指导。在我的组件下面找到:

<template>
  <div class="form-group">
    <textarea name="body" class="form-control" v-model="body" rows="4" placeholder="What's on your mind"></textarea>
  </div>
  <div class="form-group">
    <div v-if="attach">
        <img :src="selectedFile" style="width:70px; height:60px" />
        <button type="button" class="btn btn-danger" @click.prevent="cancelImage">Cancel</button>
    </div>
    <div v-else>
        <input type="file" @change="onFileChange" class="btn btn-default" multiple>
    </div>
  </div>
  <div class="form-group">
    <button type="button" class="btn btn-primary" @click.prevent="sendPost">Post</button>
  </div>
</template>

<script>
    export default {
      data(){
        return {
          body: '',
          images: [],
          attach: false,
          selectedFile: ''
        }
      },
      methods: {
        onFileChange(e){
          var files = e.target.files;
          if(files){
            var files_count = files.length;
            for (let i=0; i<files_count; i++){
              var reader = new FileReader();
              reader.onload = function(e){
                this.selectedFile = e.target.result;
              }
              reader.readAsDataURL(files[i]);
            }
          }
        }
      }
    }
</script>

Answer 1

这很好用。

Html 部分

<script src="https://unpkg.com/vue"></script>

<div id="app">
   <input
          type="file"
          multiple
          accept="image/jpeg"
          @change="onFileChange"
          />

  <div v-for="(image, key) in images" :key="key">
    <div>
      <img class="preview" :ref="'image'" />
      {{ image.name }}
    </div>
  </div>
</div>

在 JS 部分

 new Vue({
  el: '#app',
  data: {
    images: [],
  },
   methods: {
    onFileChange(e) {
      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]);
      }
    }
  }
})

这里的工作演示: https://jsfiddle.net/Diwas_Poudel/1rLgzjvk/8/