Vue3+element-plus 实现图片图片

爱敲代码小黑2024-07-28 8:19

在看下面内容之前,请一定要去看看 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 选择器在文档中查询元素。

  1. querySelector:

    • 这个方法返回文档中匹配指定 CSS 选择器的第一个元素。如果没有找到匹配的元素，它将返回 null。

  2. 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>
相关推荐
工业互联网专业几秒前
毕业设计选题：基于springboot+vue+uniapp的驾校报名小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
J不A秃V头A30 分钟前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂1 小时前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客1 小时前
pinia在vue3中的使用
前端·javascript·vue.js
宇文仲竹2 小时前
edge 插件 iframe 读取
前端·edge
Kika写代码2 小时前
【基于轻量型架构的WEB开发】【章节作业】
前端·oracle·架构
天下无贼！3 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr3 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林3 小时前
npm发布插件超级简单版
前端·npm·node.js
我码玄黄4 小时前
THREE.js：网页上的3D世界构建者
开发语言·javascript·3d
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CCF-CSP认证考试 202406-3 文本分词 100分题解08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10软件工程从理论到实践客观题汇总(头歌第一章至第八章)