上传Button
该组件为基于 Element Plus 的文件上传按钮,支持格式与大小校验、多文件管理,并在上传成功后通过事件返回文件地址,适用于表单或内容管理系统中的文件提交场景。
基础属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
fileType | string[] | -- | 允许上传的文件类型列表(如 ['png', 'jpg', 'pdf']) |
fileSize | number | -- | 文件大小限制(单位:MB) |
limit | number | 1 | 最大上传文件数量 |
autoJoin | boolean | -- | 是否逗号拼接, limit > 1 时逗号拼接为字符串 |
drag | boolean | -- | 是否启用拖拽上传区域 |
isShowTip | boolean | true | 是否显示文件格式与大小提示 |
hiddenFileList | boolean | -- | 是否隐藏已上传文件列表(通过 CSS 强制隐藏) |
directory | string | -- | 上传目录(用于后端路径组织) |
组件事件
| 事件名 | 说明 |
|---|---|
upload-success | 上传成功时触发;$args[0] 为上传成功后的文件地址(若 limit > 1 则为字符串数组,否则为逗号分隔的字符串) |
注意事项
- 文件校验逻辑:上传前会校验文件扩展名(匹配
fileType)和大小(不超过fileSizeMB),不满足则阻止上传并提示; - 上传结果格式:当
limit === 1或autoJoin为true时,upload-success回调参数为逗号拼接的字符串;否则为字符串数组; - 文件列表控制:
hiddenFileList为true时,通过 CSS 隐藏.el-upload-list,但不影响内部状态管理; - 目录参数:
directory会用于构造上传 URL 路径,具体行为由后端约定;
