El-upload二次封装，真正的开箱即用！

前端

2023-12-08 12:24:57

如何对 El-Upload 组件进行二次封装以满足特定需求

什么是 El-Upload 组件？

El-Upload 组件是 Vue.js 开发中最常用的文件上传组件。它提供了基本的文件上传功能，但有时它并不能满足所有需求。

二次封装的好处

二次封装是指在现有组件的基础上添加新功能和特性。对于 El-Upload 组件，这可以解决以下痛点：

限制文件大小
限制文件类型
对上传文件进行预处理
对上传文件进行后处理
存储上传文件

使用 Mixin 进行二次封装

Vue.js 的 Mixin 是实现 El-Upload 组件二次封装的最佳方式。Mixin 是特殊组件，可以被其他组件继承。我们可以将二次封装逻辑写入 Mixin，然后将其应用到 El-Upload 组件。

代码示例

// mixin.js
import ElUpload from 'element-ui/lib/upload';

export default {
  mixins: [ElUpload],
  props: {
    // 新增的属性
    fileSizeLimit: {
      type: Number,
      default: 1024 * 1024 * 2 // 2MB
    },
    fileTypes: {
      type: Array,
      default: ['image/*', 'video/*', 'audio/*']
    }
  },
  methods: {
    // 新增的方法
    beforeUpload(file) {
      if (file.size > this.fileSizeLimit) {
        this.$message.error('文件大小不能超过2MB');
        return false;
      }
      if (!this.fileTypes.includes(file.type)) {
        this.$message.error('文件类型不正确');
        return false;
      }
      return true;
    }
  }
};

应用 Mixin

将 Mixin 应用到 El-Upload 组件：

// App.vue
import ElUpload from 'element-ui/lib/upload';
import Mixin from './mixin.js';

Vue.component('el-upload', Mixin(ElUpload));

使用二次封装后的组件

现在，您可以像使用普通 El-Upload 组件一样使用二次封装后的组件：

<el-upload
  action="/api/upload"
  :file-size-limit="2048 * 1024" // 2MB
  :file-types="['image/*', 'video/*', 'audio/*']"
  @on-success="handleSuccess"
  @on-error="handleError"
></el-upload>

常见问题解答