Skip to content

上传Button

该组件为基于 Element Plus 的文件上传按钮,支持格式与大小校验、多文件管理,并在上传成功后通过事件返回文件地址,适用于表单或内容管理系统中的文件提交场景。

基础属性

属性名类型默认值说明
fileTypestring[]--允许上传的文件类型列表(如 ['png', 'jpg', 'pdf']
fileSizenumber--文件大小限制(单位:MB)
limitnumber1最大上传文件数量
autoJoinboolean--是否逗号拼接, limit > 1 时逗号拼接为字符串
dragboolean--是否启用拖拽上传区域
isShowTipbooleantrue是否显示文件格式与大小提示
hiddenFileListboolean--是否隐藏已上传文件列表(通过 CSS 强制隐藏)
directorystring--上传目录(用于后端路径组织)

组件事件

事件名说明
upload-success上传成功时触发;$args[0] 为上传成功后的文件地址(若 limit > 1 则为字符串数组,否则为逗号分隔的字符串)

注意事项

  • 文件校验逻辑:上传前会校验文件扩展名(匹配 fileType)和大小(不超过 fileSize MB),不满足则阻止上传并提示;
  • 上传结果格式:当 limit === 1autoJointrue 时,upload-success 回调参数为逗号拼接的字符串;否则为字符串数组;
  • 文件列表控制hiddenFileListtrue 时,通过 CSS 隐藏 .el-upload-list,但不影响内部状态管理;
  • 目录参数directory 会用于构造上传 URL 路径,具体行为由后端约定;