vue3 el-upload二次封装

对于Vue3和Element UI的el-upload二次封装，你可以参考以下步骤：

1. 首先，根据Element UI官方文档的指引，了解el-upload组件的使用方法和属性。你可以在官方文档中找到详细的代码示例和解释。

2. 创建一个Vue组件，例如UploadImg，用于封装el-upload组件。在组件中，你可以根据需要使用el-upload提供的上传、文件列表、删除等功能。你可以根据自己的需求，将el-upload的属性传递给子级组件或自定义函数进行处理。

3. 在组件中，你可以使用axios或其他HTTP库来进行文件的上传和删除操作。你可以根据自己的需要，封装适当的请求函数。比如，你可以创建一个delUpImage函数用于删除图片，或者创建一个uploadImg函数用于上传图片。

4. 在Vue的template中使用封装好的UploadImg组件，传递相应的属性和事件监听函数。这样，你就可以在页面中使用二次封装的el-upload组件了。

下面是一个示例的代码结构：

// UploadImg.vue

<template>
  <el-upload
    :limit="limit"
    action=""
    accept="image/*"
    :http-request="uploadFile"
    list-type="picture-card"
    :auto-upload="false"
    :file-list="fileList"
    :on-exceed="handleExceed"
    :before-remove="beforeRemove"
    ref="upload"
  >
    <img src="../assets/common_images/uploadImage.png" width="146" height="146">
  </el-upload>
  <el-form-item>
    <el-button size="small" type="primary" style="margin-top: 20px;" @click="submitUpload">点击上传</el-button>
  </el-form-item>
</template>

<script>
import { defineComponent } from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'UploadImg',
  props: {
    limit: {
      type: Number,
      default: 6
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    uploadFile(file) {
      // 上传文件的逻辑处理
    },
    handleExceed(files, fileList) {
      // 处理文件超出限制的逻辑
    },
    beforeRemove(file, fileList) {
      // 删除文件前的逻辑处理
    },
    submitUpload() {
      // 点击上传按钮的逻辑处理
    }
  }
});
</script>

请注意，这只是一个示例代码，你需要根据自己的实际需求进行相应的修改和调整。另外，为了实现文件上传和删除操作，你可能还需要引入其他库或自定义函数来处理HTTP请求。