阅读量:0
在看下面内容之前,请一定要去看看 element-plus 中上传组件 el-upload组件
上传组件
重点关注下面几个属性
:auto-upload=“false” , 关闭自动上传
:on-change=“onUploadFile” 监听上传情况
简单示例:
<el-form-item label="文章封面" prop="cover_img"> <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false" :on-change="onUploadFile" > <img v-if="imgUrl" :src="imgUrl" class="avatar" /> <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> </el-upload> </el-form-item> 方式一: URL.createObjectURL()
注意:
我这里 定义 formModel 为提交数据 , 这个和后端接口有关,情根据实际进行设计
const imgUrl = ref('') // 预览图片路径 const onUploadFile = (uploadFile) => { imgUrl.value = URL.createObjectURL(uploadFile.raw) formModel.value.cover_img = uploadFile.raw // console.log('上传文件', formModel.value) } 介绍 URL.createObjectURL()
参数: 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。
返回值: 一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。
使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
所以上面的代码可以进行优化:
const onUploadFile = (uploadFile) => { if (imgUrl.value) { URL.revokeObjectURL(imgUrl.value) imgUrl.value = '' } imgUrl.value = URL.createObjectURL(uploadFile.raw) console.log(imgUrl.value) formModel.value.cover_img = uploadFile.raw // console.log('上传文件', formModel.value) } 超详细URL.createObjectURL,还有例子!!!还有对比FileReader.readAsDataURL(file)
方式二: readAsDataURL
使用了FileReader对象来读取文件内容，并将其转换为base64编码的字符串。FileReader是一个读取文件内容的API，它可以异步读取文件内容并将其转换为纯文本或DataURL。
详解
<script setup> import { ref } from 'vue' import { Plus, Upload } from '@element-plus/icons-vue' import { useUserStore } from '@/stores' import { userUpdateavatar, userUploadAvatarService } from '@/api/user.js' const userStore = useUserStore() const imgUrl = ref(userStore.user.user_pic) const uploadRef = ref() const onUploadFile = (file) => { const reader = new FileReader() reader.readAsDataURL(file.raw) reader.onload = () => { imgUrl.value = reader.result // console.log('imgUrl', imgUrl.value) } } const onUpdateAvatar = async () => { await userUpdateavatar(imgUrl.value) // await userUploadAvatarService(imgUrl.value) await userStore.getUser() ElMessage({ type: 'success', message: '更换头像成功' }) } </script> <template> <page-container title="更换头像"> <el-row> <el-col :span="12"> <el-upload ref="uploadRef" class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="onUploadFile" > <img v-if="imgUrl" :src="imgUrl" class="avatar" /> <img v-else src="@/assets/avatar.jpg" width="278" /> </el-upload> <br /> <el-button @click="uploadRef.$el.querySelector('input').click()" type="primary" :icon="Plus" size="large" >选择图片</el-button > <el-button @click="onUpdateAvatar" type="success" :icon="Upload" size="large" > 上传头像 </el-button> </el-col> </el-row> </page-container> </template> <style lang="scss" scoped> .avatar-uploader { :deep() { .avatar { width: 278px; height: 278px; display: block; } .el-upload { border: 1px dashed var(--el-border-color); border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; transition: var(--el-transition-duration-fast); } .el-upload:hover { border-color: var(--el-color-primary); } .el-icon.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 278px; height: 278px; text-align: center; } } } </style> 拓展
@click=“uploadRef.$el.querySelector(‘input’).click()”
这里就是通过 querySelector（“input”） 获取DOM元素,然后调用 click() 方法querySelector 和 querySelectorAll，它们是 DOM API 的一部分，用于根据 CSS 选择器在文档中查询元素。
querySelector:- 这个方法返回文档中匹配指定 CSS 选择器的第一个元素。如果没有找到匹配的元素，它将返回
null。
- 这个方法返回文档中匹配指定 CSS 选择器的第一个元素。如果没有找到匹配的元素，它将返回
querySelectorAll:- 这个方法返回一个
NodeList对象，包含了文档中所有匹配指定 CSS 选择器的元素。如果没有找到任何元素，它将返回一个空的NodeList对象。
- 这个方法返回一个
以下是 querySelector 和 querySelectorAll 的用法示例：
// 使用 querySelector 获取第一个匹配的元素 const firstElement = document.querySelector('.my-class'); // 使用 querySelectorAll 获取所有匹配的元素 const allElements = document.querySelectorAll('.my-class'); // NodeList 对象可以使用 length 属性来获取元素数量 if (allElements.length > 0) { // 获取第一个元素 const firstElement = allElements[0]; // 获取最后一个元素 const lastElement = allElements[allElements.length - 1]; } code
<!-- 用户头像 --> <script setup> import { ref } from 'vue' import { Plus, Upload } from '@element-plus/icons-vue' import { useUserStore } from '@/stores' import { userUpdateavatar, userUploadAvatarService } from '@/api/user.js' const userStore = useUserStore() // const imgUrl = ref('') const imgUrl = ref(userStore.user.user_pic) const Base64_img = ref('') const uploadRef = ref() const test = ref() const onUploadFile = (file) => { // 实现预览 imgUrl.value = URL.createObjectURL(file.raw) // console.log(userStore.user.user_pic) const reader = new FileReader() reader.readAsDataURL(file.raw) reader.onload = function (e) { const Base64Data = e.target.result Base64_img.value = Base64Data // console.log('打印Base64', Base64Data) } } // 上传头像 const onUpdateAvatar = async () => { await userUpdateavatar(Base64_img.value) await userStore.getUser() ElMessage({ type: 'success', message: '更换头像成功' }) } // 测试 const Click_Test = () => { console.log('①') } const Click_Test_two = () => { const btn = test.value.$el.querySelector('.btn_one') btn.click() } </script> <template> <page-container title="更换头像" ref="test"> <el-row> <el-col :span="12"> <el-upload ref="uploadRef" class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="onUploadFile" > <img v-if="imgUrl" :src="imgUrl" class="avatar" /> <img v-else src="@/assets/avatar.jpg" width="278" /> </el-upload> <br /> <el-button @click="uploadRef.$el.querySelector('input').click()" type="primary" :icon="Plus" size="large" >选择图片</el-button > <el-button @click="onUpdateAvatar" type="success" :icon="Upload" size="large" > 上传头像 </el-button> </el-col> </el-row> <el-button class="btn_one" @click="Click_Test">按钮①</el-button> <el-button class="btn_two" @click="Click_Test_two">按钮②</el-button> </page-container> </template> <style lang="scss" scoped> .avatar-uploader { :deep() { .avatar { width: 278px; height: 278px; display: block; } .el-upload { border: 1px dashed var(--el-border-color); border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; transition: var(--el-transition-duration-fast); } .el-upload:hover { border-color: var(--el-color-primary); } .el-icon.avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 278px; height: 278px; text-align: center; } } } </style> 