elementUI如何封装上传组件

要封装 Element UI 的上传组件，你可以创建一个自定义的 Vue 组件，然后在其中使用 Element UI 的 el-upload 组件。以下是一个简单的封装示例：

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :auto-upload="autoUpload"
    >
      <slot></slot>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'CustomUpload',
  props: {
    uploadUrl: {
      type: String,
      required: true
    },
    autoUpload: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 处理上传成功的回调逻辑
      this.$emit('upload-success', response, file, fileList);
    },
    beforeUpload(file) {
      // 可以在这里添加一些上传前的逻辑判断，如文件类型、大小等
      return true; // 返回 true 表示允许上传
    },
    clearFiles() {
      this.$refs.upload.clearFiles();
    },
    abortUpload() {
      this.$refs.upload.abort();
    }
  }
};
</script>

在这个示例中，我们创建了一个 `CustomUpload` 组件，它接受一个 `uploadUrl` 属性来指定上传地址，并且还有一个可选的 `autoUpload` 属性来控制是否自动上传。

你可以在组件中添加自定义的逻辑和样式，并使用 `this.$refs.upload` 来访问 Element UI 的上传组件实例，从而调用其方法和获取上传的文件信息。

使用示例：

<template>
  <div>
    <custom-upload
      upload-url="上传地址"
      :auto-upload="false"
      @upload-success="handleUploadSuccess"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </custom-upload>
  </div>
</template>

<script>
import CustomUpload from '@/components/CustomUpload.vue';

export default {
  components: {
    CustomUpload
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      console.log('上传成功');
    }
  }
};
</script>

在上面的示例中，我们在 `CustomUpload` 组件中使用了一个插槽，用来插入自定义的上传按钮。当文件上传成功后，会触发 `upload-success` 事件，你可以在父组件中监听该事件并处理相应的逻辑。

这样，你就可以通过封装 Element UI 的上传组件来方便地在项目中使用了。