注意:

我这里 定义 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="更换头像">code>

<el-row>

<el-col :span="12">code>

<el-upload

ref="uploadRef"code>

class="avatar-uploader"code>

:auto-upload="false"code>

:show-file-list="false"code>

:on-change="onUploadFile"code>

>

<img v-if="imgUrl" :src="imgUrl" class="avatar" />code>

<img v-else src="@/assets/avatar.jpg" width="278" />code>

</el-upload>

<br />

<el-button

@click="uploadRef.$el.querySelector('input').click()"code>

type="primary"code>

:icon="Plus"code>

size="large"code>

>选择图片</el-button

>

<el-button

@click="onUpdateAvatar"code>

type="success"code>

:icon="Upload"code>

size="large"code>

>

上传头像

</el-button>

</el-col>

</el-row>

</page-container>

</template>

<style lang="scss" scoped>code>

.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。

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">code>

<el-row>

<el-col :span="12">code>

<el-upload

ref="uploadRef"code>

class="avatar-uploader"code>

:auto-upload="false"code>

:show-file-list="false"code>

:on-change="onUploadFile"code>

>

<img v-if="imgUrl" :src="imgUrl" class="avatar" />code>

<img v-else src="@/assets/avatar.jpg" width="278" />code>

</el-upload>

<br />

<el-button

@click="uploadRef.$el.querySelector('input').click()"code>

type="primary"code>

:icon="Plus"code>

size="large"code>

>选择图片</el-button

>

<el-button

@click="onUpdateAvatar"code>

type="success"code>

:icon="Upload"code>

size="large"code>

>

上传头像

</el-button>

</el-col>

</el-row>

<el-button class="btn_one" @click="Click_Test">按钮①</el-button>code>

<el-button class="btn_two" @click="Click_Test_two">按钮②</el-button>code>

</page-container>

</template>

<style lang="scss" scoped>code>

.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>