【Vue3大事件 | 项目笔记】第六天

前言：Vue3大事件项目是一个基于Vue3的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学或巩固Vue3，希望本系列文章可以帮助到你。

【Vue3大事件 | 项目笔记】第六天

- 今日完结：
- 今日收获：
- - [1.利用 $el 模拟点击 el-upload 内部 input 实现文件选择触发](#1.利用$ el 模拟点击 el-upload 内部 input 实现文件选择触发)
  - 2.图片上传预览
- 杂项知识点：
- 总结：

今日完结：

了解AI插件Copilot
完成个人中心基本资料页面
完成个人中心更换头像页面
完成个人中心重置密码页面

今日收获：

1.利用 $el 模拟点击 el-upload 内部 input 实现文件选择触发

el-upload 组件默认是 "点击上传区域（比如预览图 / 占位框）" 触发文件选择弹窗，样式和触发区域固定（图中白色框）

就比如当我们点击白色框（对应代码<el-upload ref="uploadRef" :auto-upload="false"></el-upload>）的时候，就会进行图片的选择，而如果我们想要实现点击"选择图片"按钮也能实现相应的功能，我们就要利用 $el 模拟点击 el-upload 内部 input 实现文件选择触发，

javascript 复制代码

<script setup>
import { ref } from 'vue'
const uploadRef = ref(null)
</script>


<template>
  <el-upload ref="uploadRef" :auto-upload="false"></el-upload>
  <button @click="uploadRef.$el.querySelector('input').click()">选择图片</button>
</template>

Vue 模板引用（ref） ：uploadRef 是通过 ref="uploadRef" 给 el-upload 组件绑定的模板引用，用于在代码中直接访问组件的 DOM 元素或实例。
** $el 属性** ： Vue 组件实例的$ el 属性指向该组件渲染后对应的根 DOM 元素（即 el-upload 最终生成的 DOM 节点）。
DOM 操作（querySelector/click） ：querySelector('input') 是原生 JS 方法，用于从 DOM 节点中查找匹配的子元素；click() 是原生 JS 方法，用于模拟鼠标点击事件。
自定义上传触发逻辑 ：覆盖 el-upload 默认的触发方式（默认点击上传区域触发选择文件），改为通过自定义按钮触发，提升交互灵活性。

2.图片上传预览

用户选择本地图片后，我们不想要图片先上传到服务器，就能在页面上看到选中的图片效果，就可以用到FileReader + readAsDataURL 的组合方案。

javascript 复制代码

// 1. 创建FileReader实例：FileReader是浏览器提供的内置对象，专门用于异步读取本地文件内容
const reader = new FileReader()

// 2. 读取文件为DataURL格式（Base64编码）：
// file.raw 是el-upload组件封装后返回的原生File对象（包含用户选择的本地图片的完整信息）
// readAsDataURL方法会将图片文件的二进制内容转换成 `data:image/png;base64,xxxx` 格式的字符串
reader.readAsDataURL(file.raw)

// 3. 监听文件读取完成事件：FileReader读取文件是异步操作，读取成功后触发onload回调
reader.onload = () => {
  // 把读取后的Base64字符串赋值给图片显示的src属性（imgUrl），实现本地图片即时预览
  imgUrl.value = reader.result
}

杂项知识点：

FileReader（Base64）与 URL.createObjectURL () 区别

在【Vue3大事件 | 项目笔记】第五天中我们也讲到了关于图片预览的知识（URL.createObjectURL () ），那和本次（FileReader（Base64））的有什么不同呢，以下是相关说明：

总结：

今天网上主要讲的是如何用ai辅助我们写代码，效率很快，但这个要建立在我们知识点都懂了的情况下，因为我们不能完全依赖ai，如果提示词给的不全，ai有很多时候会修改我们已经完成的代码，有时甚至会返回一个错误代码。总的下来，做这个项目对我的收获很大，认识了Element组件库，AI插件Copilot，很多优化项目的方法等等，希望你通过我的这系列文章也有所收获，感谢你的阅读。

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！