3.2 Upload源码分析 -- ant-design-vue系列

Upload源码分析 – ant-design-vue系列

源码地址：https://github.com/vueComponent/ant-design-vue/blob/main/components/upload/Upload.tsx

1 概述

本篇是对Upload组件的分析，这个组件调用了vc-upload，是对vc-upload的封装。

作用包括：上传数据的管理、上传行为的定义、上传结果的预览等。

Upload上传包括两种形式：点击和拖动，分别如下所示：

|
|
|
| ------------------------------------------------------------ | ------------------------------------------------------------ |

Upload预览包括三种形式：text、picture、picture-card，分别如下所示：

|
|
|
|
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |

2 源码分析

2.1 Dragger组件：拖动上传

使用<a-upload-dragger>组件来实现拖动上传，内部还是调用了Upload组件，这是只是设置了type: 'drag'。

 const draggerProps = {
   ...restProps,
   ...restAttrs,
   type: 'drag',
   style: { ...(style as any), height: typeof height === 'number' ? `${height}px` : height },
 } as any;
return <Upload {...draggerProps} v-slots={slots}></Upload>;

2.2 Upload组件

2.2.1 渲染函数

主要逻辑如下图：

• 当type === 'drag'，需要在VcUpload外面套一个div节点，这个节点是有作用的。