2020-07-28 10:03:53 +08:00
|
|
|
|
---
|
2021-06-03 22:09:30 +08:00
|
|
|
|
title: InputImage 图片
|
2020-07-29 16:20:21 +08:00
|
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
type: 0
|
|
|
|
|
group: null
|
2021-06-03 22:09:30 +08:00
|
|
|
|
menuName: InputImage
|
2020-07-29 16:20:21 +08:00
|
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
|
order: 27
|
|
|
|
|
---
|
2020-07-29 16:20:21 +08:00
|
|
|
|
|
2021-06-03 22:09:30 +08:00
|
|
|
|
图片格式输入,需要实现接收器,提交时将以 url 的方式提交,如果需要以表单方式提交请使用 [InputFile](input-file#手动上传)。
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"api": "/api/mock2/form/saveForm",
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"type": "input-image",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "image",
|
|
|
|
|
"label": "image",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"receiver": "/api/upload/file"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-09-11 18:23:25 +08:00
|
|
|
|
默认情况下,选中文件后,就会自动调用 `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 () {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
这个接口需要返回图片地址,比如下面的格式
|
2020-12-24 16:32:22 +08:00
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
{
|
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "",
|
|
|
|
|
"data": {
|
2021-09-11 18:23:25 +08:00
|
|
|
|
"value": "https:/xxx.yy/zz.png"
|
2020-12-24 16:32:22 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2021-09-11 18:23:25 +08:00
|
|
|
|
点击表单提交的时候,实际提交的就是这个返回的图片地址,比如上面的例子是 `image`,则会提交
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
{
|
|
|
|
|
"image": "https:/xxx.yy/zz.png"
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-24 16:32:22 +08:00
|
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
|
## 限制文件类型
|
|
|
|
|
|
|
|
|
|
可以配置`accept`来限制可选择的文件类型,格式是文件后缀名`.xxx`
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"api": "/api/mock2/form/saveForm",
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"type": "input-image",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "image",
|
|
|
|
|
"label": "限制只能上传jpg图片",
|
|
|
|
|
"accept": ".jpg",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"receiver": "/api/upload/file"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
想要限制多个类型,则用逗号分隔,例如:`.jpg,.png`
|
|
|
|
|
|
2021-01-21 18:13:04 +08:00
|
|
|
|
## 限制文件大小
|
|
|
|
|
|
|
|
|
|
配置 `limit`,更多属性请参考后面的属性说明。
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"api": "/api/mock2/form/saveForm",
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"body": [
|
2021-01-21 18:13:04 +08:00
|
|
|
|
{
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"type": "input-image",
|
2021-01-21 18:13:04 +08:00
|
|
|
|
"name": "image",
|
|
|
|
|
"label": "限制只能上传宽度大于 1000 的图片",
|
|
|
|
|
"accept": ".jpg",
|
|
|
|
|
"limit": {
|
|
|
|
|
"minWidth": 1000
|
|
|
|
|
},
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"receiver": "/api/upload/file"
|
2021-01-21 18:13:04 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
|
## 支持裁剪
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"api": "/api/mock2/form/saveForm",
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"body": [
|
2020-07-28 10:03:53 +08:00
|
|
|
|
{
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"type": "input-image",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"name": "image",
|
|
|
|
|
"label": "限制只能上传jpg图片",
|
|
|
|
|
"accept": ".jpg",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"receiver": "/api/upload/file",
|
2020-07-28 10:03:53 +08:00
|
|
|
|
"crop": true
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2020-11-13 15:21:41 +08:00
|
|
|
|
## 自动填充
|
|
|
|
|
|
|
|
|
|
上传成功后,可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中:
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
```schema: scope="body"
|
2020-11-13 15:21:41 +08:00
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"api": "/api/mock2/form/saveForm",
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"body": [
|
2020-11-13 15:21:41 +08:00
|
|
|
|
{
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"type": "input-image",
|
2020-11-13 15:21:41 +08:00
|
|
|
|
"name": "image",
|
|
|
|
|
"label": "image",
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"receiver": "/api/upload/file",
|
2020-11-13 15:21:41 +08:00
|
|
|
|
"autoFill": {
|
|
|
|
|
"myUrl": "${url}"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "text",
|
|
|
|
|
"name": "myUrl",
|
|
|
|
|
"label": "url"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
上例中,image 组件上传后,接口返回格式例如如下:
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
{
|
2020-12-24 16:32:22 +08:00
|
|
|
|
"status": 0,
|
|
|
|
|
"msg": "",
|
|
|
|
|
"data": {
|
|
|
|
|
"value": "xxxxxxx",
|
|
|
|
|
"filename": "xxxx.jpg",
|
|
|
|
|
"url": "http://xxxx.xxx.xxx"
|
|
|
|
|
}
|
2020-11-13 15:21:41 +08:00
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
然后 image 上配置:
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
"autoFill": {
|
|
|
|
|
"myUrl": "${url}"
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
这样上传成功后,会把接口中的 `url` 变量,赋值给 `myUrl` 变量
|
|
|
|
|
|
2021-05-08 17:16:48 +08:00
|
|
|
|
**多选模式**
|
|
|
|
|
|
|
|
|
|
当表单项为多选模式时,不能再直接取选项中的值了,而是通过 `items` 变量来取,通过它可以获取当前选中的选项集合。
|
|
|
|
|
|
|
|
|
|
```schema: scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"debug": true,
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"api": "/api/mock2/form/saveForm",
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"body": [
|
2021-05-08 17:16:48 +08:00
|
|
|
|
{
|
2021-06-03 22:09:30 +08:00
|
|
|
|
"type": "input-image",
|
2021-05-08 17:16:48 +08:00
|
|
|
|
"name": "image",
|
|
|
|
|
"label": "image",
|
|
|
|
|
"multiple": true,
|
2021-08-09 18:05:01 +08:00
|
|
|
|
"receiver": "/api/upload/file",
|
2021-05-08 17:16:48 +08:00
|
|
|
|
"autoFill": {
|
|
|
|
|
"myUrl": "${items|pick:url}",
|
|
|
|
|
"lastUrl": "${items|last|pick:url}"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
|
## 属性表
|
|
|
|
|
|
|
|
|
|
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
|
|
|
|
|
|
2021-03-26 17:51:14 +08:00
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------------------ | ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
|
|
|
| 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 是无限制 |
|
|
|
|
|
| limit | Limit | | 限制图片大小,超出不让上传。 |
|
|
|
|
|
| frameImage | `string` | | 默认占位图地址 |
|
|
|
|
|
| fixedSize | `boolean` | | 是否开启固定尺寸,若开启,需同时设置 fixedSizeClassName |
|
|
|
|
|
| fixedSizeClassName | `string` | | 开启固定尺寸时,根据此值控制展示尺寸。例如`h-30`,即图片框高为 h-30,AMIS 将自动缩放比率设置默认图所占位置的宽度,最终上传图片根据此尺寸对应缩放。 |
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
|
### Limit 属性表
|
|
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|
| width | `number` | | 限制图片宽度。 |
|
|
|
|
|
| height | `number` | | 限制图片高度。 |
|
|
|
|
|
| minWidth | `number` | | 限制图片最小宽度。 |
|
|
|
|
|
| minHeight | `number` | | 限制图片最小高度。 |
|
|
|
|
|
| maxWidth | `number` | | 限制图片最大宽度。 |
|
|
|
|
|
| maxHeight | `number` | | 限制图片最大高度。 |
|
|
|
|
|
| aspectRatio | `number` | | 限制图片宽高比,格式为浮点型数字,默认 `1` 即 `1:1`,如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率,请设置空字符串。 |
|