amis/docs/zh-CN/components/form/input-image.md
吴多益 bbd2d3bd98
feat:图片裁剪支持设置格式和质量 (#2785)
* feat:图片裁剪支持设置格式和质量

* 没必要加这两个函数
2021-10-28 19:38:16 +08:00

299 lines
13 KiB
Markdown
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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