图片上传框

组件名

ImgBox

配置项

样例

{
  "name": "ImgBox",
  "label": "图片上传框",
  "seats": [""],
  "explain": "",
  "conf": {
    "action": "/file/upload?objectCode={objectCode}&fieldCode={fieldCode}",
    "drag": false,
    "list-type": "picture-card",
    "auto-upload": true,
    "show-file-list": true,
    "limit": 1,
    "multiple": false
  }
}

详细说明

配置项	数据类型	是否必须	备注
name	String	是	在同一容器组件中，确保唯一！当容器组件为表单(FormView)时, name表示此表单项的prop。强烈推荐此值就使用默认的元字段名，即字段名
label	String	否	一般为中文，表单项的label，表格表头的列名
seats	Array	否	详见下方上传模式
explain	String	否	当处于表单容器中时, 此值会作为表单项label后面的?补充提示，一般用于表单填写的说明
conf	Object	否	这是ElementUI中el-upload (opens new window)组件的原生配置项。 内置list-type=picture-card

TIP

conf.action的值是dbmeta内置接收上传文件的接口地址, 如果需要上传到自定义接口，可以更改此项配置。 不过，接口务必返回上传的资源路径。

上传模式

ImgBox有两种上传模式: default和seat模式。

default模式

即默认模式，也就是传统模式。

当seats配置项值为空数组时, 或seats配置项不存在时。则视为默认模式。

默认模式就是传统模式，一个上传按钮，你可以上传1个或多个文件(取决于conf.limit配置)。当已上传的文件数量等于允许上传的文件数量时，上传按钮隐藏。

比如有一个身份证字段中允许上传两个文件，一个是身份证正面，一个是反面。则默认模式下，入库的数据格式如下:

[{
    "url": "",
    "name": ""
}, {
    "url": "",
    "name": ""
}]

seat模式

有时我们希望上传的多个文件，能够区分哪个文件是什么含义。比如上面身份证的例子中，程序是无法轻易区分上面的json数组中，哪个是身份证正面，哪个是反面的。 按先后顺序也不可靠，因为你不知道用户是先传正面，还是反面。 这时就可以使用seat模式。我们可以指定seats配置项为一个数组, 如下:

{
  "seats": ["身份证正面", "身份证反面"],
  // 省略其他配置项
}

TIP

一旦seats为非空数组, 组件自动识别为seat模式。

此时，ImgBox就会显示两个上传按钮，并且明确显示上传按钮的含义。如下图:

入库后，json值格式如下:

[{
    "url": "",
    "name": "",
    "seats": "身份证正面"
}, {
    "url": "",
    "name": "",
    "seats": "身份证反面"
}]

这样程序就很容易区分这两个资源了。

WARNING

seat模式下, conf.limit无效。每个位置只能传一个文件

关于上传，还可以参考这里: 深入使用-> 文件上传

特别说明

1. 要使用文件上传功能，你必须在元字段配置中，勾选是否文件选项;
2. 如果一个字段需要支持能传多个文件，则字段类型必须是json;
3. 如果字段类型是非json，而是文本类型, 如varchar, 则系统只会存储文件的url地址。且只会取第一个文件的url。varchar类型无法存储多个文件url， 因为程序无法区分。
4. 支持上传的字段类型必须是json或文本类型(varchar, text等)，如果误设为其他错误类型, 比如int,bit之类， 则会导致无法入库