vue upload作图片展示

可以使用Vue的v-for指令和URL.createObjectURL()方法来实现上传图片后的展示。具体步骤如下：

1. 在data中定义一个数组，用于存储上传的图片文件对象。

2. 在模板中添加一个input[type="file"]元素，用于选择图片文件，并绑定change事件。

3. 在change事件处理函数中，使用FileReader读取图片文件，并将读取到的文件对象push到之前定义的数组中。

4. 使用v-for指令遍历数组，将每个文件对象转换为URL.createObjectURL()生成的图片URL，并将其绑定到img元素的src属性上，实现图片展示。

示例代码如下：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <div v-for="(imgUrl, index) in imgUrls" :key="index">
      <img :src="imgUrl" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      imgUrls: []
    }
  },
  methods: {
    handleFileChange(e) {
      const files = e.target.files
      for (let i = 0; i < files.length; i++) {
        const reader = new FileReader()
        reader.readAsDataURL(files[i])
        reader.onload = () => {
          this.files.push(files[i])
          this.imgUrls.push(reader.result)
        }
      }
    }
  }
}
</script>