vue3如何二次封装el-upload组件进行图片上传及删除

原创

已于 2024-03-25 15:05:46 修改 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-03-25 09:42:43 首次发布

实现功能：
1、封装el-upload组件，父组件可以控制图片上传框的宽高
2、父组件可以传入提示信息，利用具名插槽
3、上传前的校验
4、实现删除功能

不同配置下的效果：
在这里插入图片描述
下边案例是图片上传的时候没有掉接口，在整体提交的时候才调用的接口，所以需要一个中间变量去接收他的图片回显
父组件引用：

<script setup lang="ts">
import {
   
    ref } from 'vue'
import {
   
    useUserStore } from '@/stores';
const userStore = useUserStore()
const img = ref(userStore.user.user_pic)
const selectRef = ref(null)
//1、调用el-upload中on-change事件
// const triggerChange = ()=>{
   
   
//   if(selectRef.value){
   
   
//     const file = new File ([""],"filename")
//     selectRef.value.onSelectFile(file,[])
//   }
// }

//2、点击按钮调用子组件，图片上传选择文件弹出框
const openFileDialog  =()=>{
   
   
  selectRef.value.$refs.uploadRef.$el.querySelector('input').click()
}
</script>

<template>
  <pageContainer title="更换头像">
     <uploadImg 
      v-model="img" ref="selectRef"
      width="200px" 
      height="200px" 
      line-height="200px"
    >
      <!-- 具名插槽 -->
      <template #tips>
      <div style="margin-top:10px;">
        <el-button type="primary" size="small" 
        @click="openFileDialog">更换头像</el-button>
        <el-button type="success" size="small" >上传头像</el-button>
      </