## 多图片上传
系统内置了附件管理,图片上传后传递的值为图片url或附件ID。
- 方法原型:
```
addImages($name = '', $title = '', $tips = '', $default = '', $attr = [])
```
- 参数说明:
```
* @param string $name 字段名:是否必填 格式: name:require 或 name
* @param string $title 标题
* @param string $tips 提示
* @param string $default 默认值
* @param array $attr 组件属性 {
* value: id/url, 值使用的附件字段, id-保存附件ID, url-保存附件url, 默认为url,
* width: 图片宽度限制,int类型,
* height: 图片高度限制,int类型,
* size_type: 尺寸限制类型, absolute: 绝对值, ratio: 按比例,
* format: 格式限制(逗号分隔的字符串或数组,默认为 ['image/png', 'image/jpeg', 'image/gif']),
* size: 文件大小限制,int类型,单位为字节,
* limit: 图片数量限制,用于多图片上传,
* disabled: 是否禁用上传功能, 即只做展示
* long_image: 长图模式,每行显示一张,依次往下显示, bool
* long_image_width: 长图模式时图片的宽度,不传时不限制大小
* draggable: 图片是否可拖拽排序
* drag: 是否开启拖拽上传
* list_type: 图片列表显示类型, 默认picture-card, 可传值text
* multiple: 图片是否支持多选
* big: 是否为大图模式
* }
```
## 调用方式
- 添加多图上传控件
```
return SBuilder::make('form')
->addImages('pics', '图片列表')
->fetch();
```
> 页面效果:
![](images/screenshot_1557908787460.png)
- 可以通过`attr`参数限制图片大小,宽高,格式以及最大上传数量。
```
return SBuilder::make('form')
->addImages('pics', '图片列表', '支持jpg、jpeg、png类型,大小不超过2M,最多上传10张', '', [
'size' => 2*1024*1024,
'format' => ['image/png', 'image/jpeg']
,
'limit' => 10,
])
->fetch();
```
> 上传数量达到上限后会隐藏自动上传按钮。
- 序言
- 下载及安装
- 目录结构
- 基础
- 多站点-单入口文件(推荐)
- (旧)多站点-多入口文件方式
- (旧)入口文件
- (旧)站点配置
- 按钮操作
- 区块概念
- 构建器(SBuilder)
- 页面-Page
- 设置页面标题
- 添加页面提示信息
- 设置页面Tab
- 设置页面背景色
- 设置是否点击遮罩关闭
- 添加区块
- 区块-Block
- 设置区块名
- 设置区块布局
- 表单(form)
- 添加表单项通用方法
- 添加表单项
- 单行文本框
- 多行文本框
- 数字输入框
- 密码框
- 数组输入框
- 单选框
- 状态选择器
- 复选框
- 下拉框
- 级联选择器
- 开关
- 日期选择器
- 日期时间选择器
- 日期范围选择器
- 日期时间范围选择器
- 时间选择器
- 时间范围选择器
- Tree 树形组件
- 图标选择器
- 颜色选择器
- 单图片上传
- 多图片上传
- 视频上传
- 单文件上传
- 多文件上传
- 富文本编辑器-QEditor
- 富文本编辑器-UEditor
- 小程序富文本
- 静态文本
- 隐藏表单项
- 表格数据输入框
- 分组
- 地图选择器(未实现)
- 地区选择器(未实现)
- 穿梭框(未实现)
- 图片裁剪(未实现)
- 邮箱输入框(未实现)
- 设置表单LabelWidth
- 设置表单提交地址
- 设置默认按钮标题
- 提交表单确认框
- 隐藏默认按钮
- 添加额外按钮
- 设置触发器
- 设置表单数据
- 表单布局
- 模板
- 表格(table)
- 设置表名
- 添加顶部按钮
- 添加时间段筛选
- 设置搜索栏
- 添加列
- text
- byte
- status
- tags
- yesno
- datetime
- icon
- image
- images
- external_image[已废弃]
- external_images[已废弃]
- link
- html
- select
- text.edit
- group
- 多选框栏
- 数量索引栏
- 操作栏
- 右侧操作按钮
- 设置多选框
- 设置显示数量索引
- 设置列表数据地址
- 直接设置数据
- 关闭ajax获取数据功能
- 设置分页
- 自动新增
- 自动编辑
- 图表(Charts)
- Html
- Iframe
- 数据面板
- 卡片列表
- 按钮(Button)
- 按钮调用示例
- 自定义组件
- 混合页面
- 概念说明
- 扩展
- 图标扩展
- 杂项
- 帮助函数
- TODO