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

前言

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

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

定位：

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

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

应用场景：

• 数据导入，以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; 

使用方式

<Upload.Dialogref="importRefs":options="UploadConfig":request-params="UploadParams"@refresh="refresh"
/>

/**
 * 导入配置
 */
const UploadConfig = {title: '导入成员',download: {type: 'AccountVo',tempName: '导入成员模板.xlsx'}
} 

<Upload.Simple ref="SimpleUploadRefs" :multiple="multiple" :file-rule="FILE_TYPE" :options="SimpleUploadConfig"><template #notes="scope"><span>只允许导入</span><span class="primary">XLS/XLSX</span><span>格式，且大小不超过10M</span><span v-if="getDownloadConfig()">，如果需要也可以<a class="download primary" title="点击下载" @click="downloadTempHandler">下载模板</a></span></template>
</Upload.Simple>

/**
 * 上传文件大小限制
 */
const SimpleUploadConfig = {fileSize: 10
} 

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

<Upload @fileChange="fileChange" :multiple="multiple"></Upload> 

组件之间的交互

基础上传组件 Base

基础的组件是基于现有的第三方组件库（element）el-upload基础上&#x