vue.js多图像上传不呈现

Posted 2021-04-21

我正在尝试使用vue.js创建多个图像上传。一切似乎都很好。但是，当我添加图像时，html不会呈现我选择的图像缩略图列表。更重要的是，我在控制台中得到了奇怪的输出。

这是我的HTML代码：

<v-layout row>
  <v-flex xs12 sm6 offset-sm3>
     <v-btn raised class="primary" @click="onPickImageList">Upload Image</v-btn>
     <input
       type="file"
       style="display: none"
       ref="fileInputList"
       accept="image/*"
       multiple
       @change="onImageListPicked">
  </v-flex>
</v-layout>

<v-layout row valid-v-if="imageList">
  <v-flex xs12 sm6 offset-sm3 v-bind="image in imageUrlList" >
       <img :src="image" height="150">
  </v-flex>
</v-layout>

这是我的脚本代码：

data () {
return {
  imageList: [],
  imageUrlList: []
}

}

onPickImageList () {
  this.$refs.fileInputList.click()
},
onImageListPicked (event) {
  let selectedFiles = event.target.files || event.dataTransfer.files 
  this.imageList = []
  Array.prototype.push.apply(this.imageList, selectedFiles)
  if (!this.imageList.length) {
    return
  }
  this.createImage(this.imageList)
},
createImage (file) {
  for (var i = 0; i < file.length; i++) {
    var fileReader = new FileReader()
    // var vm = this
    fileReader.addEventListener('load', () => {
      this.imageUrlList.push(fileReader.result)
      console.log(this.imageUrlList)
    })
    fileReader.readAsDataURL(file[i])
    this.imageList = file[i]
  }
}

这是输出：

我应该修复什么，渲染我所选图像的缩略图列表？先感谢您。

答案

而不是v-bind="image in imageUrlList"你应该使用v-for="image in imageUrlList"，

我也没有看到使用Array.prototype.push.apply(...)的原因

使用vue，您应该避免这样做，因为您不会触发反应数据来更改DOM。

简单地说：

this.imageList.push(selectedFiles);