Upload 上传
通过点击或者拖拽上传文件。
基础用法
Click or drag files to this area
Supports multi-file upload, max 5 files.
Example
表单集成
Upload 组件可以无缝集成到 BrForm 中,并支持 vee-validate 验证。
Example
API
BrUpload 属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue | UploadFile[] | [] | 绑定的文件列表 |
| name | string | 'file' | 上传的文件字段名 |
| action | string | '' | 必选参数,上传的地址 |
| headers | Record<string, string> | {} | 设置上传的请求头部 |
| data | Record<string, any> | {} | 上传时附带的额外参数 |
| multiple | boolean | false | 是否支持多选文件 |
| accept | string | '' | 接受上传的文件类型 |
| maxCount | number | - | 最大允许上传个数 |
| maxSize | number | - | 文件大小限制(字节) |
| disabled | boolean | false | 是否禁用 |
| autoUpload | boolean | true | 是否在选取文件后立即进行上传 |
BrUpload 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:modelValue | 文件列表改变时触发 | (files: UploadFile[]) |
| change | 文件状态改变时触发 | (file: UploadFile, fileList: UploadFile[]) |
| remove | 文件列表移除文件时的钩子 | (file: UploadFile, fileList: UploadFile[]) |
| success | 文件上传成功时的钩子 | (response: any, file: UploadFile, fileList: UploadFile[]) |
| error | 文件上传失败时的钩子 | (error: Error, file: UploadFile, fileList: UploadFile[]) |
| progress | 文件上传时的钩子 | (event: ProgressEvent, file: UploadFile, fileList: UploadFile[]) |
| exceed | 文件超出个数限制时的钩子 | (files: File[], fileList: UploadFile[]) |
| preview | 点击文件列表中已上传的文件时的钩子 | (file: UploadFile) |