如何封装一个实用的上传组件

前言

马上放假了，时间上相对宽裕，对最近做的东西进行一些总结。今天我们来看一个非常实用的组件，上传组件

我们先从组件的定位、组件的应用场景、组件的特性几个方面进行归纳

定位：

对于上传组件，基础的组件功能属于基础组件范畴，满足上传的基本功能。但业务平台的多样化，促使我们需要在基础组件之上，进行多样化扩展，满足业务功能的需求，这个多样化扩展隶属于业务组件层。但是需要注意几个点，进行组件约定，防止腐烂。

• 业务公用性
• 保持功能独立性，尽量解耦
• 无业务需求，不开发

应用场景：

• 数据导入，以excel为载体，一般都是成员列表、成绩导入等业务数据，方便用户进行批量操作
• 文件管理，需要兼容格式较多，PNG/JPG/GIF/PDF/DOC/XLS/txt/md/html/mp4/avi等常用格式，多应用于平台的资源管理类功能
• 独立业务功能，图片、头像临时上传需要

以上3个应用场景，一般的平台都有应用，但是不同场景对上传组件的功能要求可能不同。

这就需要考虑到业务特性以及产品规划能力。

可根据实际情况，从定位角度对不同场景的进行应用。

属性特征

1、单文件上传、多文件上传2、文件格式校验、文件大小校验3、上传文件维护（显示、移除）

组件实现

目录

对上传组件划分了3层，分别是 Base、Simple、Dialog

Base属于基础组件，提供简单的文件选择，和样式展示

Simple 复合组件-提供系统级别的扩展功能

1、上传提示语2、文件格式、文件大小、模板下载3、已上传列表管理-移除

Dialog 业务型组件

1、展示方式-弹窗2、文件上传功能3、业务参数控制、组件功能控制

入口文件

/*
 * @Description: 
 * @Author: daerduo
 */

import Upload from './Base';
import Simple from './Simple';
import Dialog from './Dialog';

// 复合组件-上传组件
Upload.Simple = Simple
// 业务组件
Upload.Dialog = Dialog

export default Upload; 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用方式

/**
 * 导入配置
 */
const UploadConfig = {title: '导入成员',download: {type: 'AccountVo',tempName: '导入成员模板.xlsx'}
} 
1
2
3
4
5
6
7
8

/**
 * 上传文件大小限制
 */
const SimpleUploadConfig = {fileSize: 10
} 
1
2
3
4
5
6
7
8

默认是Base，之间使用标签即可

 
1

组件之间的交互