amis/input-image.md at bf8379026e2c68f51f905bcaab6bb5bcb4726964

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-05 05:18:34 +08:00

feat: InputImage 文档增加 initAutoFill 属性 (#3683 )

2022-03-03 09:57:59 +08:00

16 KiB

Executable File

Raw Blame History

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}"
      }
    }
  ]
}

initAutoFill

当表单反显时，可通过initAutoFill控制autoFill在数据反显时是否执行。

{
  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'
    },
  ]
}

属性表

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

属性名	类型	默认值	说明
receiver	API		上传文件接口
accept	`string`	`.jpeg,.jpg,.png,.gif`	支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png`
maxSize	`number`		默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B`
maxLength	`number`		默认没有限制，当设置后，一次只允许上传指定数量文件。
multiple	`boolean`	`false`	是否多选。
joinValues	`boolean`	`true`	拼接值
extractValue	`boolean`	`false`	提取值
delimiter	`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 将自动缩放比率设置默认图所占位置的宽度，最终上传图片根据此尺寸对应缩放。
initAutoFill	`boolean`	`false`	表单反显时是否执行 autoFill

Limit 属性表

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

16 KiB Executable File Raw Blame History Unescape Escape