vue3实现图片上传缩略图

在Vue3中实现图片上传缩略图的方法如下：
1. 首先，你需要使用`<input type="file">`元素来让用户选择图片文件并获取文件对象。
2. 当用户选择了图片文件后，你可以使用`FileReader`对象来读取文件并生成缩略图。
3. 在Vue组件中，你可以使用`v-on:change`指令监听文件选择事件，并在事件处理函数中获取选中的文件。
4. 在事件处理函数中，使用`FileReader`对象的`readAsDataURL`方法将文件转换成Base64编码的字符串。
5. 将生成的Base64字符串赋值给Vue数据对象的一个属性，然后在模板中通过`<img>`元素的`src`属性来显示缩略图。

代码示例：

<template>
  <div>
    <input type="file" v-on:change="handleFileChange">
    <img v-if="thumbnail" :src="thumbnail" alt="缩略图">
 </div>
</template>

<script>
export default {
  data() {
    return {
      thumbnail: '' // 缩略图的Base64字符串
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = () => {
        this.thumbnail = reader.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>