Image 图片

基础用法

{
  "resources": {
    "imageRes": {
      "fields": {
        "image1": {
          "label": "图片上传",
          "type": "image",
          "rules": [{
            "required": true,
            "message": "请上传图片",
            "trigger": "change"
          }]
        }
      }
    }
  },
  "blocks": {
    "editImage": {
      "type": "form",
      "resource": "imageRes",
      "ctx": "edit",
      "style": {
        "width": "50%"
      },
      "events": {
        "submit": "@validate @create"
      },
      "operations": {
        "submit": {
          "type": "button",
          "label": "提交"
        }
      }
    },
    "viewImage": {
      "type": "form",
      "resource": "imageRes",
      "ctx": "view",
      "style": {
        "width": "50%"
      }
    }
  }
}

显示配置

大小、类型限制

可以通过 field.check 配置限制条件，支持 maxSizeInKB, imgMaxWidth, imgMaxHeight, imgMinWidth, imgMinHeight, imgWidth, imgHeight

{
  "type": "form",
  "resource": {
    "fields": {
      "image3": {
        "label": "尺寸范围",
        "type": "image",
        "tip": "范围240-640",
        "successUrlKey": "url",
        "check": {
          "imgMaxWidth": 640,
          "imgMaxHeight": 640,
          "imgMinWidth": 240,
          "imgMinHeight": 240
        },
        "props": {
          "action": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/upload-image"
        }
      },
      "image4": {
        "label": "固定尺寸",
        "type": "image",
        "tip": "640x640",
        "successUrlKey": "url",
        "check": {
          "imgWidth": 640,
          "imgHeight": 640
        },
        "props": {
          "action": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/upload-image"
        }
      },
      "image5": {
        "label": "图片类型",
        "type": "image",
        "tip": "只能上传png文件",
        "successUrlKey": "url",
        "props": {
          "accept": "image/png",
          "action": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/upload-image"
        }
      }
    }
  },
  "ctx": "edit"
}

显示配置

带已上传列表

可以通过 field.props['file-list'] 和 field.props['list-type']配置，而list-type 可取值text/picture/picture-card，默认为 text

{
  "type": "form",
  "resource": {
    "fields": {
      "image1": {
        "label": "默认",
        "type": "image",
        "tip": "只能不超过50kb的图片",
        "props": {
          "action": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/upload-image",
          "file-list": [{
            "name": "food.jpeg",
            "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }, {
            "name": "精选美景图片",
            "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }]
        }
      },
      "image2": {
        "label": "picture",
        "type": "image",
        "tip": "只能不超过50kb的图片",
        "props": {
          "action": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/upload-image",
          "list-type": "picture",
          "file-list": [{
            "name": "food.jpeg",
            "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }, {
            "name": "精选美景图片",
            "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }]
        }
      },
      "image3": {
        "label": "picture-card",
        "type": "image",
        "tip": "只能不超过50kb的图片",
        "props": {
          "action": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/upload-image",
          "list-type": "picture-card",
          "file-list": [{
            "name": "food.jpeg",
            "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }, {
            "name": "精选美景图片",
            "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }]
        }
      }
    }
  },
  "ctx": "edit"
}

显示配置

带默认图列表

可以通过 field.props['default-image-list'] 配置，适用从默认列表里选择一张或者上传的场景。

{
  "type": "form",
  "resource": {
    "fields": {
      "image3": {
        "label": "默认图列表",
        "type": "image",
        "props": {
          "action": "https://easy-mock.com/mock/5a0023effbbb09615044cb82/upload-image",
          "default-image-list": [{
            "name": "food.jpeg",
            "url": "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          }, {
            "name": "精选美景图片精选美景图片",
            "url": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          }]
        }
      }
    }
  },
  "ctx": "edit"
}

显示配置

在线实验室

参数列表

参数	说明	可选值 \| 类型	必填

type	field类型	string	是
label	标签文本	string	否
ctx	编辑态为edit，展示态为view，不配置则使用当前block的ctx	"edit" \| "view"	否
default	可以设置默认值	string	否
labelWidth	在form和object内生效，可单独指定当前field的标签文本所占的宽度	string	否
info	如配置会在标签处展示tooltip提示	string	否
desc	如配置会在ctx为edit状态下固定显示在表单项下面	string	否
hidden	默认为false，配置为true则改表单项会隐藏	null \| boolean	否
show	配置后只有满足指定的条件后才显示，实现对目标条件的依赖联动	string \| object \| function	否
show.name	目标字段名	string	否
show.value	目标字段值	string \| number	否
rules	可以配置多条校验规则，会在form的编辑态通过@validate来校验，详见 https://github.com/yiminghe/async-validator	null \| array	否
rules[]		object	否
rules[].require	是否必填	boolean	否
rules[].type	校验类型	"string" \| "number" \| "boolean" \| "method" \| "regexp" \| "integer" \| "float" \| "array" \| "object" \| "enum" \| "date" \| "url" \| "hex" \| "email"	否
props	action为上传接口地址	null \| object	否
successUrlKey	调用action上传接口成功后会通过该路径去获取url值	string	否
tip	固定显示的tip	string	否
check	可以配置图片校验参数，先进行本地校验，符合条件的才上传	null \| object	否

组件更多配置可参考Element：Upload 上传中的Attributes