amis/input-image.md at 3641be8d78da18fd179e2950802629c0c4ab7926

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-14 17:01:14 +08:00

* chore: 更新依赖初步

* 更新部分依赖

* 修复编译报错

* 更新 snapshots

2021-09-13 10:30:30 +08:00

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

自动填充

上传成功后，可以通过配置 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 变量

多选模式

当表单项为多选模式时，不能再直接取选项中的值了，而是通过 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 是无限制
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`。如果不想限制比率，请设置空字符串。

12 KiB Executable File Raw Blame History Unescape Escape