InputImage 图片

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

基本用法

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “type”: “input-image”, “name”: “image”, “label”: “image”, “receiver”: “/api/upload/file” } ] }

默认情况下，选中文件后，就会自动调用 `receiver` 配置里的接口进行上传，比如 node 版本的示例如下：
```javascript
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

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

想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`
## 限制文件大小
配置 `limit`，更多属性请参考后面的属性说明。
```schema: scope="body"
{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "限制只能上传宽度大于 1000 的图片",
            "accept": ".jpg",
            "limit": {
              "minWidth": 1000
            },
            "receiver": "/api/upload/file"
        }
    ]
}

支持裁剪

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

设置裁剪比例等配置，具体细节可以参考[这里](https://github.com/fengyuanchen/cropperjs#options)。
```schema: scope="body"
{
    "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 及以上版本

```schema: scope=”body” { “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` 将上传接口返回的值填充到某个表单项中：
```schema: scope="body"
{
  "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 变量来取，通过它可以获取当前选中的选项集合。

```schema: scope=”body” { “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}” } } ] }

**initAutoFill**
当表单反显时，可通过`initAutoFill`控制`autoFill`在数据反显时是否执行。
```schema: scope="body"
{
  type: 'crud',
  api: '/api/mock2/crud/list',
  perPage: 3,
  columns: [
    {
      type: 'operation',
      label: '操作',
      buttons: [
        {
          type: 'button',
          label: '修改',
          level: 'link',
          size: 'xs',
          actionType: 'dialog',
          dialog: {
            title: '修改',
            size: 'lg',
            body: {
              "type": "form",
              "horizontal": {
                "left": 3,
                "right": 9
              },
              "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
              "body": [
                {
                  "type": "input-image",
                  "name": "image",
                  "label": "image",
                  "receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file",
                  "autoFill": {
                    "text": "${url}"
                  },
                  "initAutoFill": true
                },
                {
                  "type": "input-text",
                  "name": "text",
                  "label": "文本",
                },
                {
                  "type": "input-image",
                  "name": "carousel",
                  "label": "image",
                  "receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file",
                  "autoFill": {
                    "id": "${url}"
                  },
                  "initAutoFill": false
                },
                {
                  "type": "input-text",
                  "name": "id",
                  "label": "ID",
                },
              ]
            }
          },
        },
      ]
    },
    {
      name: 'id',
      label: 'ID',
      type: 'text'
    },
    {
      name: 'text',
      label: '文本',
      type: 'text'
    },
    {
      type: 'image',
      label: '图片',
      name: 'image',
      enlargeAble: true,
      title: '233',
      thumbMode: 'cover'
    },
    {
      name: 'carousel',
      label: '轮播图',
      type: 'carousel',
      width: '300'
    },
  ]
}

属性表

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

Limit 属性表

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

FileValue 属性表

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，详细请查看事件动作。