test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 20:18:03 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
8bdc387bd4
amis2/docs/zh-CN/components/form/image.md

197 lines
11 KiB
Markdown
Raw Normal View History

文档加上去了
2020-07-28 10:03:53 +08:00
---
title: Image 图片
修复路径
2020-07-29 16:20:21 +08:00
description:
文档加上去了
2020-07-28 10:03:53 +08:00
type: 0
group: null
menuName: Image
修复路径
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
更新几个第三方依赖，减少 core-js 重复依赖 (#1082) * 更新几个第三方依赖，减少 core-js 重复依赖 * 完善 image 的文档说明
2020-11-18 15:51:58 +08:00
图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 [File](file#手动上传)。
文档加上去了
2020-07-28 10:03:53 +08:00
## 基本用法
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "form",
api mock 地址替换 (#1408)
2021-01-19 10:20:09 +08:00
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
文档加上去了
2020-07-28 10:03:53 +08:00
"controls": [
{
"type": "image",
"name": "image",
"label": "image",
Typo: reciever --> receiver (#1465) * reciever --> receiver * doc
2021-01-27 17:37:22 +08:00
"receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
文档加上去了
2020-07-28 10:03:53 +08:00
}
]
}
```
doc
2020-12-24 16:32:22 +08:00
### 接口返回格式
```json
{
"status": 0,
"msg": "",
"data": {
"value": "xxxx"
}
}
```
- value：必须返回该字段用作回显，一般是文件资源地址
文档加上去了
2020-07-28 10:03:53 +08:00
## 限制文件类型
可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "form",
api mock 地址替换 (#1408)
2021-01-19 10:20:09 +08:00
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
文档加上去了
2020-07-28 10:03:53 +08:00
"controls": [
{
"type": "image",
"name": "image",
"label": "限制只能上传jpg图片",
"accept": ".jpg",
Typo: reciever --> receiver (#1465) * reciever --> receiver * doc
2021-01-27 17:37:22 +08:00
"receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
文档加上去了
2020-07-28 10:03:53 +08:00
}
]
}
```
想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`
翻译基于 key 而不是中文，方便以后其他语言扩展 (#1416)
2021-01-21 18:13:04 +08:00
## 限制文件大小
配置 `limit`，更多属性请参考后面的属性说明。
```schema: scope="body"
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "image",
"name": "image",
"label": "限制只能上传宽度大于 1000 的图片",
"accept": ".jpg",
"limit": {
"minWidth": 1000
},
Typo: reciever --> receiver (#1465) * reciever --> receiver * doc
2021-01-27 17:37:22 +08:00
"receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
翻译基于 key 而不是中文，方便以后其他语言扩展 (#1416)
2021-01-21 18:13:04 +08:00
}
]
}
```
文档加上去了
2020-07-28 10:03:53 +08:00
## 支持裁剪
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
文档加上去了
2020-07-28 10:03:53 +08:00
{
"type": "form",
api mock 地址替换 (#1408)
2021-01-19 10:20:09 +08:00
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
文档加上去了
2020-07-28 10:03:53 +08:00
"controls": [
{
"type": "image",
"name": "image",
"label": "限制只能上传jpg图片",
"accept": ".jpg",
Typo: reciever --> receiver (#1465) * reciever --> receiver * doc
2021-01-27 17:37:22 +08:00
"receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file",
文档加上去了
2020-07-28 10:03:53 +08:00
"crop": true
}
]
}
```
add autoFIll doc in image and file
2020-11-13 15:21:41 +08:00
## 自动填充
上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中：
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
add autoFIll doc in image and file
2020-11-13 15:21:41 +08:00
{
"type": "form",
api mock 地址替换 (#1408)
2021-01-19 10:20:09 +08:00
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
add autoFIll doc in image and file
2020-11-13 15:21:41 +08:00
"controls": [
{
"type": "image",
"name": "image",
"label": "image",
Typo: reciever --> receiver (#1465) * reciever --> receiver * doc
2021-01-27 17:37:22 +08:00
"receiver": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file",
add autoFIll doc in image and file
2020-11-13 15:21:41 +08:00
"autoFill": {
"myUrl": "${url}"
}
},
{
"type": "text",
"name": "myUrl",
"label": "url"
}
]
}
```
上例中，image 组件上传后，接口返回格式例如如下：
```json
{
doc
2020-12-24 16:32:22 +08:00
"status": 0,
"msg": "",
"data": {
"value": "xxxxxxx",
"filename": "xxxx.jpg",
"url": "http://xxxx.xxx.xxx"
}
add autoFIll doc in image and file
2020-11-13 15:21:41 +08:00
}
```
然后 image 上配置：
```json
"autoFill": {
"myUrl": "${url}"
}
```
这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量
文档加上去了
2020-07-28 10:03:53 +08:00
## 属性表
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
feat:图片上传支持配置占位图样式及其比例等 (#1665) * feat:图片上传支持配置占位图样式及其比例等 * fix conflict * 更新snapshot * feat:表格中图片上传支持默认图片 * 增加fixedSize配置项支持用户自定义图片框尺寸 * 拆分fixedSize配置项 * 删除无用代码 Co-authored-by: 邓黔川 <dengqianchuan@baidu.com> Co-authored-by: dqc <qianchuan.deng@gmail.com>
2021-03-18 12:00:26 +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 | | 限制图片大小，超出不让上传。 |
| defaultImage | `string` | | 默认占位图地址 |
| fixedSize | `boolean` | | 是否开启固定尺寸 |
| fixedSizeClassName | `string` | | 开启固定尺寸时，根据此值控制展示尺寸。例如`h-30`,即图片框高为 h-30,最终上传图片根据此尺寸对应缩放。也可同时设置设置宽度的类名，例如`h-30 w-52`,若不设置宽度类名，则根据父元素尺寸自适应 |
文档加上去了
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`。 如果不想限制比率，请设置空字符串。 |
Reference in New Issue Copy Permalink