--- title: InputImage 图片 description: type: 0 group: null menuName: InputImage icon: order: 27 --- 图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 [InputFile](input-file#手动上传)。 ## 基本用法 ```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 () {}); ``` 这个接口需要返回图片地址，比如下面的格式 ```json { "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 组件上传后，接口返回格式例如如下： ```json { "status": 0, "msg": "", "data": { "value": "xxxxxxx", "filename": "xxxx.jpg", "url": "http://xxxx.xxx.xxx" } } ``` 然后 image 上配置： ```json "autoFill": { "myUrl": "${url}" } ``` 这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量，这个里支持表达式，比如在前面加上域名 ```json "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}" } } ] } ``` ## 属性表 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 | 属性名 | 类型 | 默认值 | 说明 | | ------------------ | ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | receiver | [API](../../../docs/types/api) | | 上传文件接口 | | accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` | | maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` | | maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 | | multiple | `boolean` | `false` | 是否多选。 | | joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | | extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | | delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | | 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`。 如果不想限制比率，请设置空字符串。 |