vue3+elementPlus <script setup lang="ts">写法 上传图片转化成base64格式

你可以使用HTML5的FileReader API将上传的图片转换为base64格式。以下是一个示例：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*"/>
    <img :src="imageUrl"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const file = ref<File | null>(null)
const imageUrl = ref<string>('')

const handleFileChange = (e: Event) => {
  const files = (e.target as HTMLInputElement).files
  if (files && files.length > 0) {
    file.value = files[0]
    const reader = new FileReader()
    reader.onload = () => {
      imageUrl.value = reader.result as string
    }
    reader.readAsDataURL(file.value)
  }
}
</script>

在上面的示例中，我们使用`ref`函数创建了两个响应式变量：`file`用于存储上传的文件，`imageUrl`用于存储转换后的base64编码。在`handleFileChange`函数中，我们获取到选择的文件并创建一个FileReader对象。当FileReader对象完成读取文件时，会通过`onload`回调函数将转换后的base64编码赋值给`imageUrl`变量。最后，我们在模板中使用`<img>`标签显示转换后的图片。