组件说明

图片组件用于上传和管理图片文件，支持单图和多图上传、裁剪等功能。

用法示例

use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;

Builder::form(function (Form $builder) {
    // 单图上传
    $builder->addRowImage('avatar', '头像', '', function($component) {
        $component->receiver('${UPLOAD_FILE_API}');
        $component->maxSize(2097152); // 2MB
        $component->accept('.jpg,.png,.gif');
        $component->crop(true); // 开启裁剪
    });

    // 多图上传
    $builder->addRowImage('photos', '相册', '', [
        'multiple' => true,
        'maxLength' => 9,
        'draggable' => true, // 可拖拽排序
        'limit' => [
            'width' => 1920,
            'height' => 1080
        ]
    ]);

    // 固定尺寸图片
    $builder->addRowImage('banner', 'Banner图', '', function($component) {
        $component->fixedSize(true);
        $component->fixedSizeClassName('h-30');
        $component->crop([
            'aspectRatio' => 16/9, // 裁剪比例
            'rotatable' => true,
            'scalable' => true
        ]);
    });
});

组件参数

参数名	类型	默认值	说明
name	string	-	字段名称
label	string	-	字段标签
value	string\|array	-	默认值，单图为字符串，多图为数组
receiver	string	-	上传文件接口
accept	string	-	支持的图片类型格式，如：.jpg,.png
capture	string	-	移动端输入来源控制
maxSize	int	-	文件大小限制，单位为B
maxLength	int	-	最大上传数量
multiple	bool	false	是否多选
joinValues	bool	false	是否拼接值
extractValue	bool	true	是否提取值
delimiter	string	','	拼接符
autoUpload	bool	true	是否选择完就自动开始上传
hideUploadButton	bool	false	是否隐藏上传按钮
fileField	string	'file'	文件字段名
crop	bool\|array	false	是否支持裁剪，可配置裁剪参数
limit	array	-	限制图片大小，如：['width' => 1920, 'height' => 1080]
frameImage	string	-	默认占位图地址
fixedSize	bool	false	是否开启固定尺寸
fixedSizeClassName	string	-	固定尺寸时的CSS类名，如：h-30
initAutoFill	bool	true	表单反显时是否执行autoFill
uploadBtnText	string\|array	-	上传按钮文案
dropCrop	bool	false	图片上传后是否进入裁剪模式
initCrop	bool	false	初始化后是否立即进入裁剪模式
draggable	bool	false	开启后支持拖拽排序
draggableTip	string	-	拖拽提示文案
className	string	-	CSS类名
required	bool	false	是否必填
disabled	bool	false	是否禁用

使用说明

receiver默认使用全局上传接口${UPLOAD_FILE_API}
accept可以限制上传的图片格式，如：.jpg,.png,.gif
maxSize单位是字节(B)，1MB = 1048576B
crop支持图片裁剪，可以传入裁剪配置对象：
limit可以限制图片的宽高尺寸
multiple为true时支持多图上传
draggable为true时可以拖拽调整图片顺序
fixedSize配合fixedSizeClassName使用，可以固定图片展示尺寸