Vue 3 单张图片上传本地预览无需后端，用 FileReader 或 URL.createObjectURL 将文件转 base64 或临时 URL 绑定至 img/el-image 实现即时渲染，并支持删除、大图预览及上传后 URL 替换。
Vue 3 中实现单张图片上传后的本地预览，核心是**不依赖后端、不发请求，仅用浏览器原生 API（FileReader）将选中的图片转为 base64 URL 并绑定到 <img> 或 <el-image> 组件上**。整个过程轻量、即时、无网络延迟。
1. 选择文件并生成预览 URL
监听 <input type="file"> 的 change 事件，读取第一个文件（限制单张），用 FileReader.readAsDataURL() 转为可直接渲染的 data URL：
- 使用
ref管理预览地址，例如previewUrl = ref('') - 在
onFileChange中判断event.target.files[0]是否存在且类型为图片（可选校验） - 创建
FileReader实例，onload回调中将e.target.result赋值给previewUrl
2. 渲染预览图并控制显示逻辑
把 previewUrl 绑定到图片标签或 Element Plus 的 <el-image>，配合条件渲染控制是否显示：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
<el-image v-if="previewUrl" :src="previewUrl" fit="cover" />- 可加样式限定尺寸，如
style="width: 120px; height: 120px" - 若需“上传前预览”，确保
el-upload的:auto-upload="false"，避免自动触发上传
3. 配合 el-upload 的推荐写法
若使用 Element Plus 的 <el-upload>，推荐用 @change 钩子替代原生 input，更符合组件生态：
立即学习“前端免费学习笔记（深入）”；
- 设置
:show-file-list="false"隐藏默认文件列表 - 在
on-change回调中接收file对象，调用URL.createObjectURL(file.raw)（比 FileReader 更简洁） - 注意：
file.raw是原生 File 实例，URL.createObjectURL()返回临时内存 URL，页面刷新即失效，适合预览
4. 可选增强体验
提升用户感知和操作自由度：
- 点击预览图弹出大图（可用
vue3-photo-preview插件或el-image自带preview-src-list） - 添加“删除”按钮，点击后清空
previewUrl和表单字段值 - 上传成功后，用接口返回的真实 URL 替换临时 URL，实现从预览到正式回显的平滑过渡
