---
title: Image 图片
description:
type: 0
group: null
menuName: Image
icon:
order: 27
---

图片格式输入，默认 amis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。

## 基本用法

```schema:height="300" scope="body"
{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "image",
            "reciever": "https://houtai.baidu.com/api/upload/file"
        }
    ]
}
```

## 限制文件类型

可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`

```schema:height="350" scope="body"
{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "限制只能上传jpg图片",
            "accept": ".jpg",
            "reciever": "https://houtai.baidu.com/api/upload/file"
        }
    ]
}
```

想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`

## 支持裁剪

```schema:height="350" scope="body"
{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "image",
            "name": "image",
            "label": "限制只能上传jpg图片",
            "accept": ".jpg",
            "reciever": "https://houtai.baidu.com/api/upload/file",
            "crop": true
        }
    ]
}
```

## 属性表

除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置

| 属性名           | 类型                            | 默认值       | 说明                                                                                                  |
| ---------------- | ------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
| reciever         | [API](../../types/api)          |              | 上传文件接口                                                                                          |
| accept           | `string`                        | `text/plain` | 默认只支持`image/jpeg, image/jpg, image/png, image/gif`，要支持其他类型，请配置此属性为图片后缀`.xxx` |
| maxSize          | `string`                        |              | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB`                                      |
| 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`。。    |
| limit            | Limit                           |              | 限制图片大小，超出不让上传。                                                                          |

### Limit 属性表

| 属性名      | 类型     | 默认值 | 说明                                                                                                                                                |
| ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| width       | `number` |        | 限制图片宽度。                                                                                                                                      |
| height      | `number` |        | 限制图片高度。                                                                                                                                      |
| minWidth    | `number` |        | 限制图片最小宽度。                                                                                                                                  |
| minHeight   | `number` |        | 限制图片最小高度。                                                                                                                                  |
| maxWidth    | `number` |        | 限制图片最大宽度。                                                                                                                                  |
| maxHeight   | `number` |        | 限制图片最大高度。                                                                                                                                  |
| aspectRatio | `number` |        | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |