vue实现上传图片并显示

在Vue中，可以使用以下代码实现上传图片并显示：

1. 首先，需要在Vue组件中添加一个文件输入框，用于选择要上传的图片：

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

2. 接着，在Vue组件中定义一个方法，用于获取选择的图片并将其转换为base64格式：

methods: {
  onFileChange(e) {
    const file = e.target.files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = e => {
      this.imageUrl = e.target.result
    }
  }
}

3. 最后，在Vue组件中定义一个数据属性，用于保存选择的图片的base64编码，并在模板中使用该属性来显示图片：

data() {
  return {
    imageUrl: ''
  }
}

这样，当用户选择一张图片后，该图片将会被转换为base64编码并显示在页面上。需要注意的是，这种方式上传的图片实际上是作为base64编码的文本数据上传到服务端，而不是作为文件上传。如果需要实现文件上传的功能，需要使用其他方式。