vue3 elementplus 封装上传组件

Vue是目前最为流行的前端框架之一，而Element Plus是基于Vue 3.0开发的一款UI框架，它提供了许多实用而丰富的组件，其中包括上传组件。但是，对于一些复杂的业务场景，我们可能需要进行上传组件的封装，以便更好地满足我们的需求，并且提供更好的交互效果。

Vue 3.0提供了新的Composition API来实现组件的逻辑复用，这也为我们封装上传组件提供了新的方式。根据实际需求，我们可以采用不同的封装方式来实现上传组件，下面我们以Element Plus为例，结合Vue 3.0的Composition API，简单介绍一下上传组件的封装方法。

首先，我们需要引入Element Plus的上传组件，并且在组件中定义需要用到的Props参数，包括上传路径、上传文件类型等。然后，我们可以封装一个可组合的上传逻辑，以便在不同的组件中复用。具体实现方式如下：

// Upload.vue

<template>
  <el-upload
    :action="action"
    :accept="accept"
    :before-upload="beforeUpload"
    :on-success="onSuccess"
    :on-error="onError"
    :show-file-list="showFileList"
    ref="upload"
  >
    <slot></slot>
  </el-upload>
</template>

<script>
  import { ref } from 'vue'

  export default {
    props: {
      action: {
        type: String,
        required: true
      },
      accept: {
        type: String,
        default: ''
      },
      showFileList: {
        type: Boolean,
        default: true
      }
    },
    setup(props, { slots }) {
      const uploadRef = ref(null)

      // 点击上传前执行的逻辑
      const beforeUpload = (file) => {
        // 执行一些操作，如限制文件类型、文件大小等
      }

      // 上传成功执行的逻辑
      const onSuccess = (response, file, fileList) => {
        // 执行一些操作，如更新组件状态、页面数据等
      }

      // 上传失败执行的逻辑
      const onError = (error, file, fileList) => {
        // 执行一些操作，如提示用户上传失败、记录日志等
      }

      return {
        uploadRef,
        beforeUpload,
        onSuccess,
        onError
      }
    }
  }
</script>

在上面的代码中，我们引入了Vue 3.0的Composition API，并且定义了一个Upload组件，其中包含了Element Plus的上传组件，并且定义了需要用到的Props参数，如上传路径、上传文件类型等。在setup函数中，通过ref创建了一个uploadRef，用来获取组件的实例。同时，我们还定义了上传前、上传成功、上传失败等具体的上传逻辑。

接下来，我们可以在具体业务组件中使用该Upload组件，并且结合插槽等方式，实现一些自定义的上传交互。以文件上传为例，代码如下：

// FileUpload.vue

<template>
  <div>
    <upload
      action="/api/upload"
      accept=".jpeg,.png,.gif"
      @click="handleClick"
      @success="handleSuccess"
      @error="handleError"
      ref="uploader"
    >
      <el-button>{{ uploading ? '正在上传' : '选择文件' }}</el-button>
    </upload>
  </div>
</template>

<script>
  import Upload from './Upload.vue'
  import { ref, reactive } from 'vue'

  export default {
    components: { Upload },
    setup() {
      const uploader = ref(null)
      const state = reactive({
        uploading: false
      })

      const handleClick = () => {
        uploader.value.$refs.upload.click()
      }

      const handleSuccess = (response) => {
        console.log(response)
        state.uploading = false
      }

      const handleError = (error) => {
        console.log(error)
        state.uploading = false
      }

      return {
        uploader,
        state,
        handleClick,
        handleSuccess,
        handleError
      }
    }
  }
</script>

在上面的代码中，我们引入了刚才封装的Upload组件，并且通过@click事件触发选择文件的逻辑。同时，我们定义了state，用来控制上传状态，并且通过处理上传成功或者失败的回调，更新上传状态和提示用户上传结果。

通过上述代码，我们可以看到，使用Vue 3.0的Composition API结合Element Plus，实现上传组件的封装非常方便，并且可以在不同的业务场景中复用。当然，具体的封装方式还需要结合具体需求来进行选择和实现。