vue.js多图像上传不呈现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js多图像上传不呈现相关的知识,希望对你有一定的参考价值。

我正在尝试使用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]
  }
}

这是输出:

enter image description here

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

答案

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

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

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

简单地说:

this.imageList.push(selectedFiles);

以上是关于vue.js多图像上传不呈现的主要内容,如果未能解决你的问题,请参考以下文章

Vue JS呈现HTML元素

使用带有渲染功能的 Vue.js 3 片段

Vue.js 2.0 在一个项目上呈现相同的组件,但在另一个项目上不呈现

Vue.js学习系列--如何在sublime是vuejs代码呈现高亮状态

多图片上传

如何让 DOM 呈现对 VUE.js 项目中计算数据的更改