amis/input-image.md at fix-location

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-12 11:55:21 +08:00

feat: inputFile & inputImage 开放 capture 属性可以用于配置移动端拍照行为 Close: #4330 (#8462 )

2023-10-24 14:28:13 +08:00

22 KiB

Executable File

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

限制文件大小

配置 maxSize，限制文件大小，单位为 B。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-image",
            "name": "image",
            "label": "上传文件不能大于 1K",
            "accept": ".jpg",
            "maxSize": 1024,
            "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}"
      }
    },
    {
      "type": "tpl",
      "label": false,
      "inline": false,
      "tpl": "<strong>myUrl集合</strong>"
    },
    {
      "type": "each",
      "name": "myUrl",
      "className": "mb-1",
      "items": {
        "type": "tpl",
        "tpl": "<span class='label label-info m-l-sm inline-block mb-1'><%= data.item %></span>"
      }
    },
    {
      "type": "tpl",
      "label": false,
      "inline": false,
      "tpl": "<strong>lastUrl</strong>"
    },
    {
      "type": "text",
      "name": "lastUrl",
      "label": "lastUrl",
      "inline": false
    }
  ]
}

其他表单项填充

{
  "type": "form",
  "title": "表单",
  "body": [
    {
      "type": "select",
      "label": "选项",
      "name": "imageUrl",
      "delimiter": "|",
      "autoFill": {
        "inputImage": "${value}"
      },
      "options": [
        {
          "label": "imageURL",
          "value": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
        },
        {
          "label": "空链接",
          "value": ""
        }
      ]
    },
    {
      "type": "input-image",
      "label": "图片上传",
      "name": "inputImage",
      "imageClassName": "r w-full"
    }
  ]
}

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

拖拽排序

可配置 draggable 为 true 启动拖拽排序。

{
  "type": "form",
  "title": "表单",
  data: {
    image: [
      'http://www.sortablejs.com/assets/img/npm.png',
      'http://www.sortablejs.com/assets/img/bower.png',
      'http://www.sortablejs.com/assets/img/js.png'
    ]
  },
  "body": [
    'Images: <br />${image|split|join:"<br />"}',
    {
      type: 'input-image',
      name: 'image',
      multiple: true,
      draggable: true
    }
  ]
}

属性表

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

属性名	类型	默认值	说明
receiver	API		上传文件接口
accept	`string`	`.jpeg,.jpg,.png,.gif`	支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png`
capture	`string`	`undefined`	用于控制 input[type=file] 标签的 capture 属性，在移动端可控制输入来源
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
uploadBtnText	`string` \| SchemaNode		上传按钮文案。支持 tpl、schema 形式配置。
dropCrop	`boolean`	`true`	图片上传后是否进入裁剪模式
initCrop	`boolean`	`false`	图片选择器初始化后是否立即进入裁剪模式
draggable	`boolean`	false	开启后支持拖拽排序改变图片值顺序
draggableTip	`string`	'拖拽排序'	拖拽提示文案

Limit 属性表

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

事件表

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

[name]表示当前组件绑定的名称，即name属性，如果没有配置name属性，则通过file取值。

事件名称	事件参数	说明
change	`[name]: FileValue` \| `Array<FileValue>` 组件的值	上传文件值变化时触发(上传失败同样会触发)
remove	`item: FileValue` 被移除的文件 `[name]: FileValue` \| `Array<FileValue>` 组件的值	移除文件时触发
success	`item: FileValue` 上传的文件 `result: any` 远程上传请求成功后接口返回的结果数据 `id: string` id `[name]: FileValue` 组件的值	上传成功时触发
fail	`item: FileValue` 上传的文件 `error: object` 远程上传请求失败后返回的错误信息 `[name]: FileValue` \| `Array<FileValue>` 组件的值	上传文件失败时触发

FileValue 属性表

属性名	类型	说明
name	`string`	图片名称
value	`string`	上传成功后返回的 url
state	`string`	文件当前状态,值可为 `pending` `uploaded` `invalid`
error	`string`	错误信息

动作表

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

动作名称	动作配置	说明
clear	-	清空

22 KiB Executable File Raw Permalink Blame History Unescape Escape