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

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

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

基本用法

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "image",
            "receiver": "/api/upload/file"
        }
    ]
}

默认情况下，选中文件后，就会自动调用 receiver 配置里的接口进行上传，比如 node 版本的示例如下：

const express = require('express');
const multer = require('multer');
const upload = multer({dest: 'uploads/'});
const app = express();

app.use(express.static('public'));

// 默认情况下是 file 字段名作为文件参数，也可以通过 fileField 配置来改成别的名字
app.post('/uploader', upload.single('file'), function (req, res, next) {
  res.json({
    status: 0,
    data: {
      value: '/' + req.file.path
    }
  });
});

// 配合上面的返回值，将 uploads 目录可读，这样返回的文件才能正常显示
app.get('uploads', express.static('uploads'));

app.listen(8080, function () {});

这个接口需要返回图片地址，比如下面的格式

{
  "status": 0,
  "msg": "",
  "data": {
    "value": "https:/xxx.yy/zz.png"
  }
}

点击表单提交的时候，实际提交的就是这个返回的图片地址，比如上面的例子是 image，则会提交

{
  "image": "https:/xxx.yy/zz.png"
}

限制文件类型

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

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "限制只能上传jpg图片",
            "accept": ".jpg",
            "receiver": "/api/upload/file"
        }
    ]
}

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

限制文件大小

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

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "限制只能上传宽度大于 1000 的图片",
            "accept": ".jpg",
            "limit": {
              "minWidth": 1000
            },
            "receiver": "/api/upload/file"
        }
    ]
}

支持裁剪

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "上传后裁剪",
            "receiver": "/api/upload/file",
            "crop": true
        }
    ]
}

设置裁剪比例等配置，具体细节可以参考这里。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "上传后裁剪",
            "receiver": "/api/upload/file",
            "crop": {
              "aspectRatio": 1.7777
            }
        }
    ]
}

默认情况下裁剪结果是 png 格式，如果要支持其它格式，请设置 cropFormat，比如下面设置为 jpeg 格式，同时设置质量为 0.9

1.4.0 及以上版本

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "上传后裁剪",
            "receiver": "/api/upload/file",
            "crop": true,
            "cropFormat": "image/jpeg",
            "cropQuality": 0.9
        }
    ]
}

如果浏览器支持，还能设置为 image/webp

自动填充

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

{
  "type": "form",
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "input-image",
      "name": "image",
      "label": "image",
      "receiver": "/api/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 变量，这个里支持表达式，比如在前面加上域名

"autoFill": {
    "myUrl": "https://cdn.com/${filename}"
}

多选模式

当表单项为多选模式时，不能再直接取选项中的值了，而是通过 items 变量来取，通过它可以获取当前选中的选项集合。

{
  "type": "form",
  "debug": true,
  "api": "/api/mock2/form/saveForm",
  "body": [
    {
      "type": "input-image",
      "name": "image",
      "label": "image",
      "multiple": true,
      "receiver": "/api/upload/file",
      "autoFill": {
        "myUrl": "${items|pick:url}",
        "lastUrl": "${items|last|pick:url}"
      }
    }
  ]
}

属性表

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

属性名	类型	默认值	说明
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 是无限制
cropFormat	string	image/png	裁剪文件格式
cropQuality	number	1	裁剪文件格式的质量，用于 jpeg/webp，取值在 0 和 1 之间
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。 如果不想限制比率，请设置空字符串。