前言

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

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

定位：

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

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

应用场景：

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

使用方式

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

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

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

组件之间的交互

基础上传组件 Base

基础的组件是基于现有的第三方组件库（element）el-upload基础上，做界面扩展和功能增强使用

• 界面扩展部分

主要是外框及内部文字、图标的调整以，在el-upload的默认插槽slot

• 行为部分

multiple : props属性控制，受外部调用控制，默认是false，单选模式on-change : 添加文件、上传成功和上传失败时都会被调用on-remove：文件列表移除文件时触发

展示型组件 Simple

对于基础组件，只能满足组件的选择，实际业务应用，通用性不强。展示型组件对基础组件的进一步封装，主要目的是满足业务功能需求，这一点很重要。

因要考虑页面交互方式，交互方式根据业务场景可划分为

1、在组件内嵌套，如表单页面，做为表单项存在2、独立个体，在弹窗内内使用，如数据导入等

需要满足以上2种方式。

hooks部分

import { reactive, ref } from "vue";export default function useSimple() {const uploadForm = reactive({files: [],});const clearForm = (state) => {uploadForm.files = [];}/*** 移除文件*/const removeFile = (file) => {let index = uploadForm.files.findIndex((item) => item.name == file.name);uploadForm.files.splice(index, 1);}return {uploadForm,clearForm,removeFile,};
} 

移除已选择的文件列表，和单个文件的移除，以及向外暴露方法

从上面代码可以看出来，提供了样式多样化部分：

• 提示说明
• 文件选择后的列表，移除文件
• 文件模式（单文件、多文件选择）、上传个数限制、文件格式、文件大小校验

向外暴露方法1、getFiles 获取已上传文件列表2、clearFiles 清楚已选择的文件列表3、事件：fileChange，文件选择后回调、remove移除文件后回调

业务组件 Dialog

这部分是基于展示型组件之上，

如果使用场景在表单内，可直接将展示型组件做为业务容器类组件直接使用。

如果需要弹窗使用，可以在业务功能内做为业务组件进行扩展。

因当前业务组件具备一定通用性，固做为通用性业务组件使用。

当前业务组件，是以导入功能为引导，导入之前，需要先进去导入模板下载，对导入的文件需要进行以下判断

• 上传文件模式，单文件选择
• 文件格式限制，只能上传excel文件
• 文件上传需要按照一定的模板，弹窗内需要提供模板下载
• 文件上传请求

这是业务功能的要求。业务组件内，页面交互涉及到：

• 文件上传前的校验控制
• 上传时的进度或者Loading控制
• 上传状态后，页面控制等，如关闭窗体、回调触发刷新页面等

hooks

import { reactive, ref } from "vue";
import { useExport } from "@hooks";/*** 上传文件格式控制* FILE_TYPE = ["application/pdf","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/msword","application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","text/plain","application/x-zip-compressed","application/vnd.ms-powerpoint","application/vnd.openxmlformats-officedocument.presentationml.presentation","image/png","image/jpeg"]*/export default function useDialog() {const isLoading = ref(false);const setLoading = (state) => {isLoading.value = state}const uploadForm = reactive({jsonData: {name: "",},})/** * 文件格式控制 */const FILE_TYPE = ["application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","application/vnd.ms-powerpoint",]/** * 文件下载映射 */const DOWNLOAD_TYPE = {"AccountVo":"com.iss.edu.service.teachcoursemanage.model.vo.AccountVo"}/*** 下载模板* @param {*} params */const downloadHandler = (config) => {const name = DOWNLOAD_TYPE[config?.type || 'AccountVo']useExport({name: 'downloadExcelTemplate',fileName: config?.tempName || "导入模板.xlsx",fileType: "application/vnd.ms-excel;charset=utf-8"}, { name })}return {isLoading,FILE_TYPE,setLoading,uploadForm,downloadHandler};
} 

CRUD接口请求–models

import { Service,Request } from '@basic-library';
/*** @description: 服务器请求控制器* @param NO* @return {*}*/class MService {// 文件导入async uploadFile(data) {const { success } = await Service.useMultiPart('importMember', data)return success}
}
const Controller = new MService()export {Controller
} 

代码说明

loading控制部分，使用了vue的指令 v-loding 和 element-loading-text 进行上传中，和文字控制

/*** 默认值*/
const defaultValue = {title: '导入',loadingText: '正在导入请耐心等待...'
} 

文件大小控制

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

如果属性不存在，则不进行文件大小限制

下载模板控制，是根据外部传入配置控制，使用download对象，如果存在配置则进行功能开启

下载模板的功能，因比较复杂，系统层进行了hooks封装–useExport，可以翻阅之前的文章查看具体实现。 文件流转换为blob，然后使用a连接进行下载

下载的接口，与服务端进行讨论，不同模板的下载类型，是根据不同参数控制（后端微服务映射，比较麻烦）

文件上传，采用了需要拼装文件流-FormData,请求方式支持 Content-Type': 'multipart/form-data'

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享