Vue3+element-plus 实现图片图片

在看下面内容之前,请一定要去看看 element-plus 中上传组件 el-upload组件
上传组件
重点关注下面几个属性
:auto-upload=“false” , 关闭自动上传
:on-change=“onUploadFile” 监听上传情况
简单示例:

<el-form-itemlabel="文章封面"prop="cover_img"><el-uploadclass="avatar-uploader":show-file-list="false":auto-upload="false":on-change="onUploadFile"><imgv-if="imgUrl":src="imgUrl"class="avatar"/><el-iconv-elseclass="avatar-uploader-icon"><Plus/></el-icon></el-upload></el-form-item>

方式一: URL.createObjectURL()

注意:

我这里 定义 formModel 为提交数据 , 这个和后端接口有关,情根据实际进行设计

const imgUrl =ref('')// 预览图片路径 constonUploadFile=(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可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
所以上面的代码可以进行优化:

constonUploadFile=(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()constonUploadFile=(file)=>{const reader =newFileReader()
  reader.readAsDataURL(file.raw)
  reader.onload=()=>{
    imgUrl.value = reader.result
    // console.log('imgUrl', imgUrl.value)}}constonUpdateAvatar=async()=>{awaituserUpdateavatar(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

的用法示例：

// 使用 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()constonUploadFile=(file)=>{// 实现预览
  imgUrl.value =URL.createObjectURL(file.raw)//   console.log(userStore.user.user_pic)const reader =newFileReader()
  reader.readAsDataURL(file.raw)
  reader.onload=function(e){const Base64Data = e.target.result
    Base64_img.value = Base64Data
    // console.log('打印Base64', Base64Data)}}// 上传头像constonUpdateAvatar=async()=>{awaituserUpdateavatar(Base64_img.value)await userStore.getUser()ElMessage({type:'success',message:'更换头像成功'})}// 测试constClick_Test=()=>{
  console.log('①')}constClick_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>