Vue 3 中文件转 Base64 需用 FileReader 读取并截取 data:xxx;base64, 后的内容，推荐封装为 Promise；多文件应并行转换并校验大小；配合 el-upload 时使用 file.raw，注意 Base64 体积增大约33%且非加密。
在 Vue 3 中，文件上传前将 File 对象转为 Base64 是常见需求，尤其适用于小图直传、前端预览、或后端仅接受 Base64 字符串的场景。关键在于用 FileReader 正确读取并提取纯 Base64 数据（去掉 data:xxx;base64, 前缀）。
直接读取 File 转 Base64
这是最常用的方式，适用于用户通过 <input type="file"> 或 el-upload 等组件选中文件后处理：
- 创建
FileReader实例，调用readAsDataURL(file) - 监听
onload回调，从reader.result中截取逗号后的部分 - 推荐封装为 Promise，便于
async/await使用
示例代码：
const fileToBase64 = (file) => {return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result.split(',')[1])
reader.onerror = reject
reader.readAsDataURL(file)
})
}
处理多文件批量转换
若一次上传多个文件，避免阻塞 UI，应并行转换：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 对
FileList或Array<file></file>调用.map(file => fileToBase64(file)) - 用
Promise.all()等待全部完成，返回 Base64 字符串数组 - 注意大文件（如 >5MB）可能导致内存压力，建议加大小校验
例如：
const base64List = await Promise.all(files.map(fileToBase64))
配合上传组件（如 Element Plus）使用
在 el-upload 的 http-request 或 on-change 钩子中处理：
- 在
on-change中获取file.raw（即原生File对象） - 调用转换函数，把结果存入响应式变量（如
ref），用于预览或提交 - 覆盖
http-request可完全自定义上传逻辑，此时可直接发送 Base64 字符串而非原始文件
注意：不要直接用 file.url（那是预览 URL，非 Base64）；也不要用 URL.createObjectURL(file)，它生成的是 blob URL，不是 Base64。
注意事项与边界情况
实际开发中容易忽略但影响体验的点：
-
类型判断：非图片文件（如 PDF）也能转 Base64，但需确认后端是否支持对应
mimeType -
错误处理：
FileReader可能因文件损坏或权限问题失败，务必加onerror捕获 - 性能提示：Base64 体积比原文件约大 33%，单张图超过 2MB 时建议先压缩再转码
- 安全性：Base64 不是加密，敏感文件仍需服务端校验，不可依赖前端过滤
