amis/docs/components/form/image.md
2020-07-29 16:20:21 +08:00

6.3 KiB
Executable File

title description type group menuName icon order
Image 图片 0 null Image 27

图片格式输入,默认 amis 会直接存储在 FEX 的 hiphoto 里面,提交到 form 是直接的图片 url。

基本用法

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "image",
            "reciever": "https://houtai.baidu.com/api/upload/file"
        }
    ]
}

限制文件类型

可以配置accept来限制可选择的文件类型,格式是文件后缀名.xxx

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "限制只能上传jpg图片",
            "accept": ".jpg",
            "reciever": "https://houtai.baidu.com/api/upload/file"
        }
    ]
}

想要限制多个类型,则用逗号分隔,例如:.jpg,.png

支持裁剪

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "限制只能上传jpg图片",
            "accept": ".jpg",
            "reciever": "https://houtai.baidu.com/api/upload/file",
            "crop": true
        }
    ]
}

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

属性名 类型 默认值 说明
reciever API 上传文件接口
accept string text/plain 默认只支持image/jpeg, image/jpg, image/png, image/gif,要支持其他类型,请配置此属性为图片后缀.xxx
maxSize string 默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为KB
maxLength number 默认没有限制,当设置后,一次只允许上传指定数量文件。
multiple boolean false 是否多选。
joinValues boolean true 拼接值
extractValue boolean false 提取值
delimeter string , 拼接符
autoUpload boolean true 否选择完就自动开始上传
hideUploadButton boolean false 隐藏上传按钮
fileField string file 如果你不想自己存储,则可以忽略此属性。
crop boolean{"aspectRatio":""} 用来设置是否支持裁剪。
crop.aspectRatio number 裁剪比例。浮点型,默认 11:1,如果要设置 16:9 请设置 1.777777777777777716 / 9。。
limit Limit 限制图片大小,超出不让上传。

Limit 属性表

属性名 类型 默认值 说明
width number 限制图片宽度。
height number 限制图片高度。
minWidth number 限制图片最小宽度。
minHeight number 限制图片最小高度。
maxWidth number 限制图片最大宽度。
maxHeight number 限制图片最大高度。
aspectRatio number 限制图片宽高比,格式为浮点型数字,默认 11:1,如果要设置 16:9 请设置 1.777777777777777716 / 9。 如果不想限制比率,请设置空字符串。