amis/docs/zh-CN/components/form/image.md

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

图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 File。

基本用法

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "image",
            "receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
        }
    ]
}

接口返回格式

{
  "status": 0,
  "msg": "",
  "data": {
    "value": "xxxx"
  }
}

• value：必须返回该字段用作回显，一般是文件资源地址

限制文件类型

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

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "限制只能上传jpg图片",
            "accept": ".jpg",
            "receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
        }
    ]
}

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

限制文件大小

配置 limit，更多属性请参考后面的属性说明。

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "限制只能上传宽度大于 1000 的图片",
            "accept": ".jpg",
            "limit": {
              "minWidth": 1000
            },
            "receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
        }
    ]
}

支持裁剪

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "限制只能上传jpg图片",
            "accept": ".jpg",
            "receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file",
            "crop": true
        }
    ]
}

自动填充

上传成功后，可以通过配置 autoFill 将上传接口返回的值填充到某个表单项中：

{
  "type": "form",
  "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
  "controls": [
    {
      "type": "image",
      "name": "image",
      "label": "image",
      "receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file",
      "autoFill": {
        "myUrl": "${url}"
      }
    },
    {
      "type": "text",
      "name": "myUrl",
      "label": "url"
    }
  ]
}

上例中，image 组件上传后，接口返回格式例如如下：

{
  "status": 0,
  "msg": "",
  "data": {
    "value": "xxxxxxx",
    "filename": "xxxx.jpg",
    "url": "http://xxxx.xxx.xxx"
  }
}

然后 image 上配置：

"autoFill": {
    "myUrl": "${url}"
}

这样上传成功后，会把接口中的 url 变量，赋值给 myUrl 变量

属性表

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

属性名	类型	默认值	说明
receiver	API		上传文件接口
accept	string	.jpeg,.jpg,.png,.gif	支持的图片类型格式，请配置此属性为图片后缀，例如.jpg,.png
maxSize	number		默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为B
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		裁剪比例。浮点型，默认 1 即 1:1，如果要设置 16:9 请设置 1.7777777777777777 即 16 / 9。。
crop.rotatable	boolean	false	裁剪时是否可旋转
crop.scalable	boolean	false	裁剪时是否可缩放
crop.viewMode	number	1	裁剪时的查看模式，0 是无限制
limit	Limit		限制图片大小，超出不让上传。
frameImage	string		默认占位图地址
fixedSize	boolean		是否开启固定尺寸,若开启，需同时设置 fixedSizeClassName
fixedSizeClassName	string		开启固定尺寸时，根据此值控制展示尺寸。例如h-30,即图片框高为 h-30,AMIS 将自动缩放比率设置默认图所占位置的宽度，最终上传图片根据此尺寸对应缩放。

Limit 属性表

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