在看下面内容之前,请一定要去看看 element-plus 中上传组件 el-upload组件
上传组件
重点关注下面几个属性
:auto-upload="false" , 关闭自动上传
:on-change="onUploadFile" 监听上传情况
简单示例:
html
<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 为提交数据 , 这个和后端接口有关,情根据实际进行设计
javascript
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可以节省性能并更快速,只不过需要在不使用的情况下手动释放内存
所以上面的代码可以进行优化:
javascript
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 。
详解
javascript
<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
的用法示例:
javascript
// 使用 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
javascript
<!-- 用户头像 -->
<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>