vueでファイルアップロードでプレビュー

input file="file"で取得した画像をサーバーアップ前にプレビューさせたり、canvasに追加して加工したりする

index.vue

<template lang="pug">
  .container
    input(
      type="file"
      multipule
      accept="image/*"
      @change="selectFiles"
      )
    .preview(v-if="imageData")
      img(
        v-for="(file,index) in imageData"
        :key="file[index]"
        :src="file.src"
        )
</template>
<script>
export default {
  data(){
    return{
      imageData:[]
    }
  },
  methods:{
    selectFiles(e){
      const files = e.target.files
      let length = files.length , i = 0 , file
      for(; i < length; i++){
        let file = files[i]
        let url = URL.createObjectURL(file)
        this.imageData.push({ src: url })
      }
    }
  }
}
</script>