element UI封装一个上传组件

前言

在前端开发中，上传组件是一个非常常见的组件，它允许用户选择本地文件并上传到服务器。element UI 是一个非常流行的前端框架，它提供了丰富的组件库，其中就包括上传组件。然而，element UI 的上传组件功能相对简单，如果我们需要更复杂的功能，就需要自己封装一个上传组件。

封装上传组件

首先，我们需要创建一个新的 Vue 组件，并将其命名为 UploadComponent。然后，在组件的 template 中，我们可以使用 element UI 的 el-upload 组件来实现上传功能。

<template>
  <el-upload
    :action="action"
    :headers="headers"
    :multiple="multiple"
    :show-file-list="showFileList"
    :on-success="onSuccess"
    :on-error="onError"
    :on-progress="onProgress"
    :on-remove="onRemove"
  >
    <el-button slot="trigger" type="primary">Select Files</el-button>
  </el-upload>
</template>

在组件的 script 中，我们可以定义组件的属性、方法和生命周期钩子。

<script>
export default {
  props: {
    action: {
      type: String,
      required: true
    },
    headers: {
      type: Object,
      default: () => {}
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showFileList: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onSuccess(response, file, fileList) {
      // 处理上传成功后的逻辑
    },
    onError(err, file, fileList) {
      // 处理上传失败后的逻辑
    },
    onProgress(event, file, fileList) {
      // 处理上传过程中的进度条
    },
    onRemove(file, fileList) {
      // 处理删除文件后的逻辑
    }
  }
}
</script>

使用封装的上传组件

现在，我们可以将封装的上传组件注册到 Vue 实例中，并使用它。

import UploadComponent from './UploadComponent.vue'

export default {
  components: {
    UploadComponent
  }
}

在模板中，我们可以使用以下代码来使用封装的上传组件。

<UploadComponent action="/upload" />

总结

通过以上步骤，我们就成功地封装了一个上传组件。这个组件可以根据我们的需要进行定制，并方便地集成到我们的项目中。