vue上传图片并显示

在Vue中上传图片并显示，可以使用HTML5的File API来实现。具体步骤如下：

1. 在模板中添加一个input元素，type为file，用于选择图片文件。

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <img :src="imageUrl" v-if="imageUrl">
  </div>
</template>

2. 在Vue实例中定义一个data属性，用于存储选择的图片文件和图片的base64编码。

<script>
export default {
  data() {
    return {
      file: null,
      imageUrl: ''
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0]
      this.getImageUrl()
    },
    getImageUrl() {
      const reader = new FileReader()
      reader.readAsDataURL(this.file)
      reader.onload = e => {
        this.imageUrl = e.target.result
      }
    }
  }
}
</script>

3. 在handleFileChange方法中，获取选择的图片文件，并调用getImageUrl方法将图片转换为base64编码。在getImageUrl方法中，创建一个FileReader对象，调用它的readAsDataURL方法将图片转换为base64编码，并将结果赋值给imageUrl属性。最后，在模板中使用v-if指令判断imageUrl是否存在，如果存在则显示图片。