Upload 上传

文件上传组件，支持图片预览、多选、大小限制和上传前钩子

文件上传组件，支持图片预览、多选、大小限制和上传前钩子

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-upload class="demo-default" />

<!-- 图片类型 -->
  <re-upload class="demo-image" accept="image" />

<!-- 文件类型 -->
  <re-upload class="demo-file" accept="file" />

<!-- 多选 -->
  <re-upload class="demo-multiple" :multiple="true" />
  <re-upload class="demo-single" :multiple="false" />

<!-- 最大数量 -->
  <re-upload class="demo-max" :multiple="true" :max="3" />
  <re-upload class="demo-max-9" :multiple="true" :max="9" />

<!-- 禁用状态 -->
  <re-upload class="demo-disabled" :disabled="true" />

<!-- 预设文件 -->
  <re-upload class="demo-preset" :files="presetFiles" :max="5" />

<!-- 已达上限 -->
  <re-upload class="demo-full" :files="fullFiles" :max="2" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-upload />。

API

Upload Props

名称类型默认值描述必传
filesArray<UploadFile>文件列表N
maxnumber0最大上传数量，0 表示不限制N
sizeLimitUTSJSONObject{}文件大小限制（字节），如 { size: 5242880, unit: 'B' }N
acceptstring"image"可接受的文件类型，如 "image" / "image/,video/"N
multiplebooleanfalse是否支持多选N
disabledbooleanfalse是否禁用N
beforeUpload(file: UploadFile) => booleannull上传前钩子函数，返回 false 或 Promise<false> 可阻止上传N
customStylestring""自定义样式N

Upload Events

名称参数描述
successfile: UploadFile上传成功时触发
failfile: UploadFile, error: string上传失败时触发
removeindex: number, file: UploadFile移除文件时触发
progressfile: UploadFile, progress: number上传进度变化时触发
changefiles: Array<UploadFile>文件列表变化时触发
selectfiles: Array<UploadFile>选择文件时触发

Upload Slots

名称描述
--
TreeSelect 树形选择器
用于多层级数据的逐级选择，交互和视觉参考示例 demo 进行了补全。
Avatar 头像
用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。