所有文件转base64（vue3+element-plus的upload组件）

在 Element Plus 的 Upload 组件中，可以通过 before-upload 钩子将文件转换为 Base64 格式。以下是完整实现方案：

<template>
  <el-upload action="#" :before-upload="handleBeforeUpload" :show-file-list="false">
    <el-button type="primary">上传文件并转Base64</el-button>
  </el-upload>

  <!-- 可选：Base64预览 -->
  <div v-if="base64Data" style="margin-top: 20px">
    <p>Base64结果：</p>
    <pre>{{ base64Data }}</pre>
    <!-- 如果是图片可预览 -->
    <img v-if="isImage" :src="base64Data" style="max-width: 300px" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const base64Data = ref('')
const isImage = ref(false)

// 文件类型校验
const isFileType = (file) => {
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'] // 按需修改
  return allowedTypes.includes(file.type)
}

// 文件转Base64
const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
}

// 上传前处理
const handleBeforeUpload = async (file) => {
  try {
    // 1. 校验文件类型（可选）
    // if (!isFileType(file)) {
    //   ElMessage.error('不支持的文件类型')
    //   return false
    // }

    // 2. 转换为Base64
    const base64 = await fileToBase64(file)

    // 3. 存储结果
    base64Data.value = base64
    isImage.value = file.type.startsWith('image/')

    // 4. 阻止默认上传行为
    return false
  } catch (error) {
    ElMessage.error('文件转换失败')
    return false
  }
}
</script>