图片上传
介绍
用于将本地的图片上传至服务器。
API
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
标题 | 左侧标题内容 | string | "图片上传" |
显示标题 | 左侧标题是否显示 | boolean | true |
默认值 | 文件默认值 | string | '' |
API绑定 | 可选择组件绑定的API | string | - |
多选 | 选择上传文件时是否可多选 | boolean | false |
额外数据 | 上传请求附加的数据 | string | - |
头部信息 | 上传请求header中的数据 | string | - |
最大上传文件个数 | 最大上传文件个数 | number | - |
单文件最大上传大小(MB) | 单个文件大小的上限 | number | 20 |
上传文件类型 | 上传文件的类型限制,多个以英文符号,间隔 | string | "image/*" |
展示上传区域 | 上传区域否显示 | boolean | true |
上传区域文字提示 | 上传区域中需要显示的文字 | string | '' |
上传区域图标 | 上传区域中需要显示的图标 | string | 'plus' |
点击预览图全屏预览 | 点击预览图是否为全屏预览 | boolean | true |
覆盖上传 | 上传后覆盖上次已上传的文件(开启后将关闭图片预览) | boolean | false |
图片选取模式 | 选取已有图片或是直接拍摄图片 | enum | 默认 | 直接调起摄像头 |
唯一标识 | 表单字段名 | string | "UPLOAD_IMG_随机八位字符" |
气泡提醒 | 表单项气泡提醒,点击标题右侧图标可查看 | string | '' |
必填 | 未输入内容时校验不通过 | boolean | false |
自定义函数 | 自定义校验函数,可配置校验规则与校验提示内容 | boolean | false |
events
事件名 | 说明 | 回调参数 |
---|---|---|
onSuccess | 上传成功时触发 | ctx, fileItem:[{url: string}] |
onExceeLimit | 上传的文件超出限制后触发 | ctx, fileList:{content: string, file: File, message: string, objectUrl: string, status: string}, fileItem: {index: number, name: string} |
onPreview | 点击图片预览时触发 | ctx, fileItem:{status: string, url: string } |
onBeforeUpload | 上传前触发 | ctx, file:File |
onBeforeRemove | 移除文件前触发 注意:最后要有返回值,返回true则可以删除成功,返回false则不会删除 | ctx, fileItem:{status: string, url: string }, detail:{index: number, name: string} |
onClickLeftIcon | 点击左侧图标时 | ctx, params:{value: string} |
onClickRightIcon | 点击右侧图标时 | ctx, params:{value: string} |